Hover in CSS

Hi Samuel,

Still do you need the h2 tag out side of anchor tag ?

Hi !

Well, I am not sure. Are you suggesting instead that I apply a font + font size + line spacing identical to h2, in the css code of this <p> element?

In other words, is the background coding through CSS cleaner if I stick to a <p> element, and not apply it according to each case, to texts of various heading levels?

Hey Samuel,

To make buttons like these, you can all the styling directly to the a element. You can also create this effect without the use of any images.

Check out this CSS:

.button-link {
  display: inline-block;
  padding: 6px 18px;
  border: solid 1px #333;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.button-link:hover,
.button-link:active,
.button-link:focus {
  background: #333;
  color: #fff;
}

You would add the “button-link” class to any link you want styled like a button.

Links are normally inline elements, so the first thing it does is make it an inline-block element so the padding can be applied. Using padding instead of defining a size allows the button shape to fit any amount of text. Then there is a border added and the corners are curved with border-radius. For good measure, a transition is added for hover effects to make it smoother.

On the hover (and :active and :focus), the background is changed to a dark gray and the font is switched to white.

Let me know if I missed any part, but this should get you a good ways there.

Hi Ben !

Great – this is very insightful, and with a few tweaks I could reach what I am looking for.

Only one point left: how to make the inline-block always centered? I tried adding the line

text-align: center;

in the css code, but it is not changing anything…

Would

float: center;

be a good solution?

Thanks again!

Samuel

Sure thing!

To center an inline-block, you’ll need to add text-align: center to the parent element. In your example, this would mean adding it to the h2 elements containing the buttons. You could add a class called something like “button-container” to these h2 elements to then give them the centered text.

Thanks Ben, great!

I also might want to set a related class for those buttons whose width I would like to define as fixed – for instance in the case of several buttons following each other ; then varying widths may look strange.

I tried the following, adding the max-width line and changing the padding line with codes that were working as I used the previous CSS (before your first response) – but it does not seem to be working now:

.button-link-fixed {
  float: center;
  display: inline-block;
  max-width: 300px;
  padding: 0.7em;
  border: solid 1px #f4f4f4;
  border-radius: 30px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.button-link-fixed:hover,
.button-link-fixed:active,
.button-link-fixed:focus {
  background: #141414;
  color: #7B7B7B;
}

Where is my mistake…?

Thanks !

Samuel

I think the issue is that the max-width value is greater than the current button width, so it isn’t restricting the size.

You could set the width explicitly instead the size you want the buttons to be. The padding can then be kept on the top and bottom only like this:

.button-link-fixed {
  padding: 0.7em 0;
  width: 250px
}

Hi Ben!

I added the two new lines you are suggesting in the CSS code I sent in the previous message, so now it looks like this:

.button-link-fixed {
  float: center;
  display: inline-block;
  padding: 0.7em 0;
  width: 250px
  border: solid 1px #f4f4f4;
  border-radius: 30px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.button-link-fixed:hover,
.button-link-fixed:active,
.button-link-fixed:focus {
  background: #141414;
  color: #7B7B7B;
}

but it is giving unwanted results:

https://www.samvriti.com/tests-hover-css/

It looks like the padding left and write, the centering (though added manually to the html) and the text-decoration: none seem cancelled… I probably made a mistake in adding those lines in the css?

My bad Ben, I hadn’t saved the new CSS modifications.

The result is still a little weird: no top and bottom padding, the centering tag does not seem to apply, and the text-decoration: none is not followed.

Thanks for your time!

Samuel

Woops I’m sorry I didn’t leave a semi-colon after the width value which is in your code now. Try adding that missing semi-colon and the CSS should then work normally.

Hi Ben,

I did add it, but it still looks odd… Let me know if that can be fixed?

Samuel

If you move the “button-link-fixed” class to the link element, this will help. The whole button will be clickable this way, rather than the link part within the button. A separate class can be given to the h2 element to add the text-align: center; code needed to center the anchor text.

The padding has an extra 0 on it right now:

padding: 0 0.7em 0;

This says no padding on the top and bottom, only on the sides. Remove the first zero, so it reads like this:

padding: 0.7em 0;

That says to add padding to the top/bottom, but not left/right.

Thanks Ben for the wonderful explanations. It is working perfectly now. It’s a pleasure learning with you! Thanks again,

Samuel

That’s great, glad to hear it! Let me know if anything else comes up.

Hi Ben,

Yes indeed! A little something came up ??

I tried adding a darker shade of grey for the text in the box, by default:

font-color: #3C3C3C;

It is darker than the colour on hover, which I wish to keep:

font-color: #7B7B7B;

The css line does not seem tricky to the least, so I am not sure why it is not applying…

You can see for instance the difference between the image files I had used initially, and the “.button-link-fixed” CSS class below it:

https://www.samvriti.com/tests-hover-css/

Thank you!

Samuel