One of my favorite ways to spice up the design of my webpage is with
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:
Colorof your element or its text
- Transition speed of the hover effects (slow v fast)
Shapeof your element
- Font and text styles of your element
Creating new and exciting hover effects can take your webpage from static to engaging! Let’s take a look at the basics.
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:
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!
In order to take this button from simple to a little more exciting, we will add this to the selector
To do this, we will head over to our CSS stylesheet and select for the button using #buttonPush. Then, we will
Notice that we are creating a separate element selector for the hover styling. We now have:
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!
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.
In the example above, it will take a full second for the button to turn from white to light blue!
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!