Adding buttons in HTML/CSS

dipanjan94

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?

Hikin' Mike

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.

dipanjan94

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!

dipanjan94

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.

dipanjan94

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' Mike

@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;
}

dipanjan94

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' Mike

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' Mike

@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

dipanjan94

@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' Mike

@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.

dipanjan94

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' Mike

@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".

dipanjan94

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' Mike

@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.

dipanjan94

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!

jbriginshawphoto

I want to piggy back onto this. I have a button now using HTML and CSS and followed these instructions. I don't want a blue button though, I want grey with black writing (like the standard buttons on smugmug). What do I need to change? I also would like the button centered. Any ideas? Here is what I have:

LEARN MORE ABOUT ME HERE

and CSS:

button {
padding: 10px 20px;
background: #176a95;
border: none;
text-transform: uppercase;
}

button a {color: black;}

jbriginshawphoto

I just realized my HTML copy and paste created a link - Doh!

< button>< a href="https://www.jbriginshawphotography.com/Meet-Justin" target="_self" class="button">LEARN MORE ABOUT ME HERE