Most modern websites use Cascading Style Sheets (CSS). Some sites use basic CSS features, while others use advanced features to make their web applications more appealing.
Adding eye-catching effects can improve the click rate on your website, provoke users to take action, or even increase the amount of time users spend on your website.
In this article, we will discuss what CSS hover effects are, how they can make your website eye-catching, how you can implement these effects, and give examples of websites that implement classy CSS hover effects.
What is the CSS hover effect?
CSS hover effect occurs when a website user hovers over an element using their cursor (mouse pointer). The result can be a change in color, text, or other animated effects. Such effects are added to a website to enhance interactivity and make it more navigable.
CSS hover effects can appear either as transitions or animations.
Transitions
Such effects allow you to change the appearance or behavior of an element on a web page. However, there must be a trigger, such as a user hovering over a specific element. The transitions move from the initial state to the final state after the trigger. A transition only runs once and doesn’t allow you to specify intermediate points.
Animations
These effects have keyframes, which allow them to repeat backward, loop, and move from the initial state to the final state. These effects also have an intermediate state. A keyframe indicates how animated elements render at a given time in the animation sequence.
Types of CSS Hover Effects
CSS hover effects can be applied to text, images, videos, links, or buttons. The following are some of the major applications:
#1. Text hover effects
Such effects are suitable when you want to build a minimalistic website. The design should be simple but still pass the message. It can come in the following forms:
- Terminal text effect: This effect mimics typing on a text processor. The words will flash, but the speed should be right enough to allow users to read through.
- Text animation: Text in this effect can flush upward, downwards, or sideways.
#2. Link hover effects
A typical website will have various hyperlinks that redirect users to different pages. Such links keep on increasing as the website grows. Link hover effects can come in these forms;
- Changing link color: The color of the link from something like blue to red.
- Changing background color: This effect changes the background color of the link.
- Text swapping: This effect changes the contents of the link icon.
#3. Button hover effects
Buttons are important in websites as they allow us to submit forms and get access to various sections of a web page. Hover effects on buttons can be implemented in the form of:
- Text color change: The color of the text on a button that says “Click Me” can change from Red to Green on hover.
- Changing background color: HTML buttons are transparent by default. Developers can add a background color to such buttons. On hover, the background color can change from something like Brown to Green.
- Bounce effect: You can add visual appeal to the user by designing the button to bounce on hover.
#4. Image hover effects
- Swap images: You can create a carousel of images that swap on hover.
- Fade in/out images: Such an effect makes images clearer as you hover over them.
- Test swap: It is very common to find websites that hide various descriptions on their images. For instance, a travel website can make hotel details visible after a user hovers.
Now we can explain some classy CSS hover effects for your website.
Change Background Color on Hover
This effect can be applied to buttons, links, or text displayed on a web page. Once the cursor of your mouse touches the target, the background colour changes.
You can change the background of your text in these steps;
- Use
:hoverpseudo-class to achieve your goals - Create an element such as a div, button, or link where you will implement the hover effect.
This is a sample code to implement these effects.
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
Hover and see me change!!!!!
</div
</body>
</html>CSS file
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}Before hover, the out will be;
After hover, the output will be;
Change Link Color on hover
Links are important elements on a web page as they help us move from one page to another. We use HTML <a> tags to create hyperlinks. Changing the link colour on hover increases the visibility of links.
We need the following to demonstrate this effect:
- Create a selector tag on either your
:heador:bodytag - Define
:hoverpseudo-class
You can use this sample code to display a link that changes from green to orange on hover.
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<a href="#">Hover over me and see the magic</a>
</div
</body>
</html>CSS file:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}Output before hover;
Output after hover effect;
Sliding Highlight on Hover
When a user hovers, this effect will add a box shadow to the inline link. The color of the link will be altered in the process. To achieve this, you can follow these steps as your guide;
- Add padding all around the link (something like 0 .25rem can work)
- Add a margin of a similar value. This prevents padding from disrupting the text flow.
You can have this as your simple html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<a href="#">Geekflare</a>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>This can be your CSS file;
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}Before the hover effect;
After the hover effect;
Rainbow Underline on hover
This effect adds an underline of multiple colors to text on hover.
- Use
:linear-gradientpseudo-class to create a smooth transition between different colors. - Use
:hoverpseudo-class to achieve your goals. - Create a link element where you will implement the hover effect.
This is a sample code to implement rainbow underline on hover:
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>This is <a href="#">Rainbow</a> hover effect. </p>
</div
</body>
</html>CSS file:
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}Before hover;
After hover;
Text Swapping on hover
Test Swapping is when text is swapped with another piece of content or text when a user hovers over the target. A perfect example is where a website has a “comments” link. After you hover, the link text can change to “Comment”.
To implement text swapping on hover, you need the following:
::beforeand::afterpseudo-elements- These create a separate element for the text to be swapped after hover.:hoverPseudo-element that changes the position or visibility of the content on hover
This is an illustration of how to implement this effect:
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button><span>99 comments</span></button>
</body>
</html>CSS file:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }Before hover;
After hover;
Websites with Great Hover Effects
If you want to borrow ideas and get some inspiration, these are some websites that you can check out.
#1. Canva
Canva is a huge name in the design world as it helps non-designers create beautiful designs. This website has awesome hover effects, from its home to product pages. It all starts with a dark blurred background on the homepage. However, the background clears on hover, and images become visible. Hover effects also appear as you pick different design templates.
#2. Haus
Haus is a perfect example of a site that implements underlining on hover, text swapping on hover, and changing the background color on hover.
#3. Mainworks
Mainworks implements both animations and transitions for its hover effects. Some notable effects are swapping text on hover, changing text color, and zooming text and images on hover.
Conclusion
The choice of hover effects to add to your website will depend on your website type, skills, taste, and preferences. Some sites, such as art and coupon platforms, may welcome super-flashy hover effects. On the other hand, legal and medical websites may opt for minimal hover effects.
Thus, you must figure out what works for your website. However, ensure that these effects align with your brand colors. Check out our best CSS resources to polish your CSS skills.
