In this tutorial, you’ll learn how to create an engaging button hover effect using CSS. This effect will change the button’s background color, text color, and add a subtle box-shadow when the user hovers over it. Such interactive elements can significantly improve the aesthetics and usability of your web pages.
Creating a button hover effect in CSS can greatly enhance the user experience on a website. Below is an example of a button with a hover effect that changes the background color, text color, and adds a box-shadow for a more dynamic feel.
HTML:
Create an HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Button Hover</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="link_wrapper">
<a href="#">Hover Me!</a>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.832 268.832">
<path d="M265.17 125.577l-80-80c-4.88-4.88-12.796-4.88-17.677 0-4.882 4.882-4.882 12.796 0 17.678l58.66 58.66H12.5c-6.903 0-12.5 5.598-12.5 12.5 0 6.903 5.597 12.5 12.5 12.5h213.654l-58.66 58.662c-4.88 4.882-4.88 12.796 0 17.678 2.44 2.44 5.64 3.66 8.84 3.66s6.398-1.22 8.84-3.66l79.997-80c4.883-4.882 4.883-12.796 0-17.678z"/>
</svg>
</div>
</div>
</div>
</body>
</html>CSS:
Create a styles.css file and add the following code:
body{
font-family: 'Lato', sans-serif;
}
.wrapper{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.link_wrapper{
position: relative;
}
a{
display: block;
width: 250px;
height: 50px;
line-height: 50px;
font-weight: bold;
text-decoration: none;
background: #333;
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
border: 3px solid #333;
transition: all .35s;
}
.icon{
width: 50px;
height: 50px;
border: 3px solid transparent;
position: absolute;
transform: rotate(45deg);
right: 0;
top: 0;
z-index: -1;
transition: all .35s;
}
.icon svg{
width: 30px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px);
transform: rotate(-45deg);
fill: #2ecc71;
transition: all .35s;
}
a:hover{
width: 200px;
border: 3px solid #2ecc71;
background: transparent;
color: #2ecc71;
}
a:hover + .icon{
border: 3px solid #2ecc71;
right: -25%;
}This CSS hover effect for buttons is simple yet effective, making your website more interactive and visually appealing.
Happy coding!
