Adding buttons in HTML/CSS

dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins

I have a HTML/CSS block in my homepage which contains links to my portfolio and printshop. At the last line, I have linked them to the text like the following

However, I want to replace this links by a button, as I think it looks more neat. I want them to look like the following.

How can I do this?

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,866 Major grins

    You already have this in your HTML:
    <p><a href="https://www.dipanjanpal.com/Portfolio" target="_self" style="color:#26B0FC">Check out my Portfolio →</a></p>

    Change the <p> </p> to <button> </button>

    Than add this to your CSS:

    button {
      padding: 10px 20px;
      background: #176a96;
      border: none;
      text-transform: uppercase;
    }
    
    button a {color: white;}
    

    You can edit the size of the button by changing the padding. The 10px is for top/bottom and 20px is left/right.

  • dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins

    Thanks Mike! However, there are two things that didn't happen in these buttons - the font size and colour.

    I'd like to have font colour as white, and font as shown in the picture (I think it's Lato, I'm not sure!)

    I have added a couple of buttons under the same HTML/CSS box temporarily so that you can have a look and take the font/colours from there. Rest looks fine, thanks again!

  • dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins
    edited May 2, 2020

    Thanks Mike! However, there are two things that didn't happen in these buttons - the font size and colour.

    Actually, I took care of both the points I mentioned here.

    I just want to increase the gap between letters sliiiightly, to make it look identical with the buttons I manually added below the HTML/CSS box.

    Edit: This is also done, ignore this comment.

  • dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins
    edited May 2, 2020

    Another thing I just noticed, when I hover the on the buttons I manually added, the colour changes slightly. And the link works in the entire box, not only on the text. Could we do it for the HTML buttons?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,866 Major grins

    @dipanjan94 said:
    Another thing I just noticed, when I hover the on the buttons I manually added, the colour changes slightly. And the link works in the entire box, not only on the text. Could we do it for the HTML buttons?

    My bad about the button. Remove this:
    <button><a href="https://www.dipanjanpal.com/Portfolio" target="_self" style="color:white">Check out my portfolio</a></button>
    <button><a href="https://www.dipanjanpal.com/Prints" target="_self" style="color:white">Visit my PrintShop </a></button>

    and this:
    <a href="https://www.dipanjanpal.com/Portfolio" target="_self" class="button">Check out my portfolio</a>
    <a href="https://www.dipanjanpal.com/Prints" target="_self" class="button">Visit my PrintShop</a>

    Then in your CSS change button to .button:

    .button {
      padding: 21px 40px;
      background: #176a96;
      border: 0;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 14px;
      font-weight: 700;
      color: white;
    }
    
  • dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins
    edited May 3, 2020

    I did what you said, and now if you open my website, you'll see them overlapping with the previous line. My questions are :

    1. How can I keep them a little below their current position?
    2. I also wish to have that effect of transparency when someone hovers their cursors on it.
    3. If I want to add a "Contact Me" button, what should I put as the href?
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,866 Major grins

    Remove these:
    <a href="https://www.dipanjanpal.com/Portfolio" target="_self" style="color:white" class="button">Check out my portfolio</a>
    <a href="https://www.dipanjanpal.com/Prints" target="_self" style="color:white" class="button">Visit my PrintShop</a>

    Add these. DO NOT ADD style="color:white" here.
    <div class="button"><a href="https://www.dipanjanpal.com/Portfolio" target="_self">Check out my portfolio</a></div>
    <div class="button"><a href="https://www.dipanjanpal.com/Prints" target="_self">Visit my PrintShop</a></div>

    Now, remove the old .button code and use these:

    .button {margin: 10px auto 10px;}
    
    .button a {
      padding: 21px 40px;
      background: #176a96;
      border: 0;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 14px;
      font-weight: 700;
      color: white;
    }
    
    .button a:hover {background: #1c7db0;}
    

    You can edit the position of the button with the margin: 10px auto 10px; (top, both left/right, bottom).

    You can change the hover background to suit.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,866 Major grins
    edited May 3, 2020

    @dipanjan94 said:
    3. If I want to add a "Contact Me" button, what should I put as the href?

    Just use <a href="#">Contact Me</a>

    Note, you can only have one on a page as I found out: https://dgrin.com/discussion/comment/2103333/#Comment_2103333

  • dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins

    @Hikin' Mike said:
    Note, you can only have one on a page as I found out: https://dgrin.com/discussion/comment/2103333/#Comment_2103333

    Thank you so much. I noticed that I don't have any "Contact Me" button on this page, except the social links. And it still does not work. Is that because of those links?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,866 Major grins

    @dipanjan94 said:
    Thank you so much. I noticed that I don't have any "Contact Me" button on this page, except the social links. And it still does not work. Is that because of those links?

    I think it's because you have a "About Me" in your menu already.

  • dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins

    I think it's because you have a "About Me" in your menu already.

    Do you mean I have a "Contact Me" in menu?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,866 Major grins

    @dipanjan94 said:

    I think it's because you have a "About Me" in your menu already.

    Do you mean I have a "Contact Me" in menu?

    Yes. Sorry I said "About Me".

  • dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins

    Hey MIke, I checked that if I add a "Contact Me" button in from the available widgets (i.e, not using HTML), it works perfectly fine in my homepage. However, if I add the button by html and css codes, it does not work.

    Could you, maybe check once by scrolling down in my homepage that whether I have the codes and everything correct? Thank you!

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,866 Major grins
    edited May 4, 2020

    @dipanjan94 said:
    Hey MIke, I checked that if I add a "Contact Me" button in from the available widgets (i.e, not using HTML), it works perfectly fine in my homepage. However, if I add the button by html and css codes, it does not work.

    Could you, maybe check once by scrolling down in my homepage that whether I have the codes and everything correct? Thank you!

    Yes it works because there is some type voodoo (most likely Javascript) when you use the SmugMug Contact Widget verses the HTML. Unfortunately in your case using the widget "breaks" the order when your using a mobile.

  • dipanjan94dipanjan94 MumbaiRegistered Users Posts: 69 Big grins

    Unfortunately in your case using the widget "breaks" the order when your using a mobile.

    Yes exactly. I will try to come up with a different design in my mind to take care of this. Thank you for all your inputs, really appreciated!

Sign In or Register to comment.