Hover Effect in CSS

One of my favorite ways to spice up the design of my webpage is with the :hover effect. Hover is a style feature that is activated when a user hovers his or her cursor over a webpage element.

The cool thing about using the hover styling feature is that you can create so many different hover effects!

Using :hover, you can modify the:

  • Color of your element or its text
  • Transition speed of the hover effects (slow v fast)
  • Shape of your element
  • Font and text styles of your element
  • etc.

Creating new and exciting hover effects can take your webpage from static to engaging! Let’s take a look at the basics.

Without Hover

Here is a plain ‘ole “Push Me” button that you might create for your webpage. It looks clean, but when the user hovers over it, nothing happens!

In my HTML file, I have this code to create the button:

<button id=”buttonPush”> Push Me! </button>

And in my CSS file I have this code to give the button a little room on each side:

#buttonPush{
margin:55px;
}

The styling I have is for the button itself – what it will look like without being hovered over. Let’s look at how to add some hover effects to it!

If you need a reminder on how to select elements to style in your CSS stylesheet, check out my tutorial on Element Selectors for CSS!

Hover Selector

In order to take this button from simple to a little more exciting, we will add this to the selector

:hover

To do this, we will head over to our CSS stylesheet and select for the button using #buttonPush. Then, we will add :hover to indicate that this styling occurs when we hover over the element.

Like so:

#buttonPush:hover{

}

Notice that we are creating a separate element selector for the hover styling. We now have:

#buttonPush{
}


AND


#buttonPush:hover{
}

The first is for the buttons default styling, and the latter is for what the button will look like when hovered over!

Styling your Hover

Once you’ve selected the element and added :hover to it, it’s time to start styling!

In the example above, I’ve added a light blue background color to the button. The button will change colors when I hover over it!

Let’s see it in action!

Hover (Before)

Hover (After)

Bonus: Hover Transition Timing

If you want to modify the speed of the hover transition, you can use the transition styling feature! Increasing the transition speed from the default 0s creates a slower, more smooth transition between the original button and the button when hovered over.

#buttonPush:hover{
background-color: lightblue;
transition: 1s;
}

In the example above, it will take a full second for the button to turn from white to light blue!

Final Thoughts

What I love about the hover selector is that you can use it on pretty much any element! There are so many ways you can style the hover of your elements, take time to play around with it! It is just like styling your normal CSS element – get creative!

What are your favorite hover effects? Comment below!

Don’t forget to subscribe to Tech Talk Code!

2 thoughts on “Hover Effect in CSS

Leave a Comment!