CSS Button Hover Effects
CSS is all about presentation. Discover how CSS Button Hover Effects works to transform plain HTML into a premium user experience in the guide below.
In web design, buttons are of great importance. Buttons are clickable elements that are used to interact with users so that users can easily navigate a website. It gives an attractive look to the web page and enhances the user experience of the website. Although you can style buttons using CSS properties to make them more impressive, you can also create a hovering effect on a button to make it stand out.
The CSS button hover effect is used to add an element of interactivity, which makes users more likely to click on the button and find out other parts of the website. If you want to give an attractive look to your web page and make it more engaging for users, then apply the CSS button hover effect on your website.
Types of CSS Button Hover Effect
There are many hover effects that you can apply to buttons to enhance the look of your webpage. Let us see some of the CSS button hover effects with examples:
1. Circular Button Hover Effect:
This effect is used to change the shape of the button to a circle. When the user hovers over the button, the button becomes circular.
Example to demonstrate the Circular Button Hover effect:
<!DOCTYPE html>
<html>
<head>
<title>CIRCULAR BUTTON HOVER EFFECT</title>
<style>
.circular-button {
width: 125px;
height: 125px;
background-color: #fca847;
color: rgb(255, 255, 255);
font-size: 18px;
cursor: pointer;
border: none;
transition: border-radius 0.2s ease-in;
}
.circular-button:hover {
border-radius: 50%;
}
</style>
</head>
<body>
<button class="circular-button">Hover Me</button>
</body>
</html>
Output:
2. Neon Light Button Hover Effect:
This functionality is employed to generate a luminous glow on the button, resulting in a neon-esque effect when the user hovers over it.
Example showcasing the neon light button hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<title>NEON LIGHT BUTTON HOVER EFFECT</title>
<style>
body{
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #065412;
min-height: 50vh;
}
.neon-button{
position: relative;
display: inline-block;
color: #72fa7c;
padding: 16px 31px;
font-size: 20px;
overflow: hidden;
}
.neon-button:hover{
background: #72fa7c;
color: #f1faf3;
box-shadow: 0 0 10px #72fa7c, 0 0 40px #72fa7c, 0 0 80px #72fa7c;
}
</style>
</head>
<body>
<button class="neon-button">Hover me</button>
</body>
</html>
Output:
3. Shiny Shadow Button Hover Effect:
This technique is employed to brighten up the button, so that when the user hovers over it, the button gleams as though light is bouncing off its surface.
Example showcasing the shiny shadow button hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SHINY SHADOW BUTTON HOVER EFFECT</title>
<style>
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.shiny-shadow-button {
color: white;
background-color: #1039f0;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
}
.shiny-shadow-button::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 0;
width: 0;
background-color: rgba(246, 246, 226, 0.4);
border-radius: 50%;
opacity: 0;
transition: all 0.5s ease;
}
.shiny-shadow-button:hover::before {
height: 120%;
width: 120%;
opacity: 1;
transition: all 0.5s ease;
animation: shine 2s infinite;
}
@keyframes shine {
0% {
transform: translate(-50%, -50%) scale(0.7);
}
100% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0;
}
}
</style>
</head>
<body>
<button class="shiny-shadow-button">Hover me</button>
</body>
</html>
Output:
4. Slide Fill Effect on Hover over Button:
This feature generates a sliding animation on the buttons. Upon hovering over a button, it triggers a sliding animation. Implementing this feature can introduce a dynamic and engaging aspect to the buttons.
Example showcasing the slide fill effect when hovering over the button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SLIDE FILL BUTTON HOVER EFFECT</title>
<style>
body{
margin: 0;
padding: 0;
}
.button1{
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
.button2{
position: absolute;
top: 60%;
left: 60%;
text-align: center;
transform: translate(-85%, -85%);
}
button{
border: 1px solid ease;
background: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding: 14px 22px;
margin: 10px;
min-width: 220px;
cursor: pointer;
transition: color 0.5s linear;
}
button:hover{
color: #e93737;
}
button::before{
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: #f7f730;
z-index: -1;
transform-origin: 0 0;
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
}
.button1::before{
transform: scaleX(0);
}
.button2::before{
transform: scaleY(0);
}
.button1:hover::before{
transform: scaleX(1);
}
.button2:hover::before{
transform: scaleY(1);
}
</style>
</head>
<body>
<div class="btn">
<button class="button1">Hover Me</button>
<button class="button2">Hover Me</button>
</div>
</body>
</html>
Output:
5. Draw Border Button Hover Effect:
This technique is employed to outline a button, so that when a user interacts with it on a website, the button's border is animatedly highlighted.
Example to draw border button hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DRAW BORDER BUTTON HOVER EFFECT</title>
<style>
body{
background-color: #a03925;
}
button{
font-family: 'Poppins',sans-serif;
position: absolute;
height: 100px;
width: 300px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #a03925;
border: 6px solid #f6fcf9;
color: #f6fcf9;
font-size: 25px;
cursor: pointer;
outline: none;
}
button::before{
content: "";
position: absolute;
height: 25px;
width: 300px;
background-color: #a03925;
margin: auto;
left: -5px;
right: 0;
bottom: -6px;
transition: width 0.5s,
height 0.5s 0.5s;
}
button::after{
content: "";
position: absolute;
height: 25px;
width: 300px;
background-color: #a03925;
margin: auto;
left: -5px;
right: 0;
top: -6px;
transition: width 0.5s,
height 0.5s 0.5s;
}
button:hover::before,
button:hover::after{
width: 0;
height: 6px;
transition: height 0.5s,
width 0.5s 0.5s;
}
</style>
</head>
<body>
<button class="draw">Hover me</button>
</body>
</html>
Output:
6. Gradient Button Hover Effect:
This technique is applied to add a gradient border to a button, so that the border transitions with a gradient effect when the user hovers over the button.
Example illustrating the gradient button hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Button Hover Effect</title>
<style>
.gradient-button {
display: flex;
padding: 20px;
width: 150px;
height: 65px;
background: linear-gradient(90deg, #c3ed8e, transparent) #f387ec;
font-size: 18px;
color: rgb(80, 65, 65);
place-content: center;
transition: background-color 1s;
}
.gradient-button:hover, .gradient-button:focus {
background-color: #2f9041;
color: rgb(80, 65, 65);
}
</style>
</head>
<body>
<button class="gradient-button">Hover me</button>
</body>
</html>
Output:
7. Clip-Path Button Hover Effect:
This feature is employed to alter the form of a button. When a user hovers over the button, its shape will be modified.
Example showcasing the clip-path button hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CLIP-PATH BUTTON HOVER EFFECT</title>
<style>
.clip-path {
padding: 15px 25px;
font-size: 18px;
background-color: #8780f6;
cursor: pointer;
color: white;
border: none;
}
.button-1:hover {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.button-2:hover {
clip-path: circle(60%);
}
</style>
</head>
<body>
<button class="clip-path button-1">Hover me</button>
<button class="clip-path button-2">Hover me</button>
</body>
</html>
Output:
8. Swipe Button Hover Effect:
This functionality is employed to add a swipe animation to a button, so that when a user hovers over the button, a swipe effect is displayed.
Example showcasing the hover effect of a swipe button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SWIPE BUTTON HOVER EFFECT</title>
<style>
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh;
background-color: firebrick;
}
.swipe-button {
padding: 12px 25px;
color: rgb(186, 25, 25);
background-color: #46f583;
font-size: 20px;
position: relative;
border: none;
cursor: pointer;
overflow: hidden;
}
.swipe-button::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background-color: rgba(15, 116, 77, 0.2);
transition: left 0.3s ease;
}
.swipe-button:hover::before {
left: 100%;
}
</style>
</head>
<body>
<button class="swipe-button">Hover me</button>
</body>
</html>
Output:
9. Box-Shadow Button Hover Effect:
This technique is employed to add a box shadow effect to a button. Consequently, when a user hovers over the button, the box shadow effect becomes visible.
Example showcasing the box-shadow button hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<title>BOX-SHADOW EFFECT ON HOVER OVER THE BUTTON</title>
<style>
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh;
background-color:darkorange;
}
.box-shadow-button {
padding: 18px 24px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border: none;
cursor: pointer;
background-color: #0e66a0;
color: wheat;
font-size: 20px;
transition: box-shadow 0.3s ease;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
.box-shadow-button:hover {
box-shadow: 0px 6px 12px #542d0a;
}
</style>
</head>
<body>
<button class="box-shadow-button">Hover Me!</button>
</body>
</html>
Output:
10. Background Color Change Effect on Hover over Button:
This functionality is employed to modify the background of a button, so that when a user hovers over a button, it alters the button's background.
Example to showcase the hover effect when changing the background color:
<!DOCTYPE html>
<html lang="en">
<head>
<title>BACKGROUND COLOR CHANGE EFFECT ON HOVER OVER THE BUTTON</title>
<style>
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 40vh;
}
.background-color-change-button{
padding: 18px 24px;
background-color: #3e8f08;
color: white;
font-size: 18px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.background-color-change-button:hover {
background-color: #de8c11;
}
</style>
</head>
<body>
<button class="background-color-change-button">Hover Me!</button>
</body>
</html>
Output:
11. Arrow Effect on Hover over Button:
This feature is employed to generate an arrow on the button, so that when a user hovers over the button, the arrow becomes visible on the button.
Example showcasing the hover effect on an arrow button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARROW EFFECT ON HOVER OVER THE BUTTON</title>
<style>
button {
padding: 18px 28px;
border-radius: 6px;
background-color: #f5f232;
color: #211e1e;
text-align: center;
width: 250px;
border: none;
font-size: 30px;
transition: all 0.5s;
cursor: pointer;
margin: 100px;
}
.arrow-button{
position: relative;
display: inline-block;
cursor: pointer;
transition: 0.5s;
}
.arrow-button:after {
content: '?';
opacity: 0;
position: absolute;
top: 18px;
right: -21px;
transition: 0.5s;
}
.arrow-button:hover{
padding-right: 25px;
padding-left: 10px;
}
.arrow-button:hover:after {
opacity: 1;
right: 10px;
}
</style>
</head>
<body>
<button class="arrow-button"><span>Hover me</span></button>
</body>
</html>
Output:
12. Light Reflection Button Hover Effect:
This technique is implemented to generate a luminous reflection on the button, so that upon hovering over the button, a light reflection will be displayed.
Example showcasing the light reflection hover effect on a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>LIGHT REFLECTION BUTTON HOVER EFFECT</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: antiquewhite;
min-height: 45vh;
}
.button {
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
}
.light-reflection {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
letter-spacing: 2px;
line-height: 50px;
max-width: 150px;
font-size: 20px;
font-weight: bolder;
width: 100%;
position: relative;
text-decoration: none;
}
.light-reflection {
border: 4px solid #f89c9c;
color: #904949;
box-shadow:0px 0px 0px 1px #f89c9c inset;
background-color: #f89c9c;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.light-reflection:hover {
text-decoration: none;
background-color: white;
border: 4px solid #f89c9c;
box-shadow:0px 0px 0px 4px #fcf1f1 inset;
}
.light-reflection:after {
background: #fcc3c3;
border: 0px solid #f89c9c;
content: "";
height: 160px;
position: absolute;
opacity: .9;
width: 50px;
top: -50px;
left: -85px;
-Webkit-transform: rotate(35deg);
transform: rotate(35deg);
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
z-index: 1;
}
.light-reflection:hover:after {
background: #f4d1d1;
border: 20px solid #f89c9c;
left: 120%;
opacity: 0;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
</style>
</head>
<body>
<div class="button">
<button class="light-reflection">Hover Me!</button>
</div>
</body>
</html>
Output:
13. Diagonal Line Transition on Hover over Button:
This technique is implemented to generate a diagonal line transition on the button. This implies that upon hovering over the button, a diagonal line transition effect will be displayed.
For instance, to showcase the diagonal line transition effect, simply hover over the button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DIAGONAL LINE TRANSITION ON HOVER OVER THE BUTTON:</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(55, 244, 181);
height: 75vh;
}
.diagonal-line {
position: relative;
color: #0c4d86;
text-align: center;
height: 55px;
line-height: 55px;
transition: 0.5s;
padding: 0 25px;
background-color: transparent;
cursor: pointer;
border: 2px solid #0c4d86;
}
.diagonal-line:hover {
border: 2px solid rgba(0, 0, 0, 0);
color: #fa9740;
}
.diagonal-line::before,
.diagonal-line::after {
content: '';
position: absolute;
box-sizing: border-box;
transform: scale(0);
transition: 0.5s;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.diagonal-line::before {
border-bottom: 3px solid #fa9740;
border-left: 3px solid #fa9740;
transform-origin: 100% 0%;
}
.diagonal-line::after {
border-top: 3px solid #fa9740;
border-right: 3px solid #fa9740;
transform-origin: 0% 100%;
}
.diagonal-line:hover::after,
.diagonal-line:hover::before {
transform: scale(1);
}
</style>
</head>
<body>
<div class="container">
<button class="diagonal-line">Hover Me!</button>
</div>
</body>
</html>
Output:
14. Button Expansion and Gradient Overlay Hover Effect:
This technique is applied to button expansion and creating a gradient overlay hover effect. This indicates that upon hovering over the button, it will enlarge and display a gradient overlay effect.
Example showcasing the expansion of a button and the hover effect with a gradient overlay:
<!DOCTYPE html>
<html lang="en">
<head>
<title>BUTTON EXPANSION AND GRADIENT OVERLAY HOVER EFFECT</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.btn {
position: fixed;
overflow: hidden;
height: 100vh;
width: 100vw;
top: 0%;
left: 0%;
background-color: #c4e1f9;
}
.hover-button {
font-family:'Courier New', Courier, monospace;
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
font-size: 3rem;
border: none;
cursor: pointer;
color: #f1dddd;
background-color: #8a44f4;
border-radius: 10rem;
padding: 1.5rem 4rem 2rem;
transform-style: preserve-3d;
transition: all 0.6s ease;
}
.hover-text {
position: relative;
z-index: 6;
}
.hover-button:after {
content: "";
background: linear-gradient(56deg, #6fdefd 0%, #d8cdfa 46%, #fb0a76 100%);
position: absolute;
width: 80%;
height: 20%;
filter: blur(15px);
border-radius: 10rem;
bottom: -4px;
left: 10%;
opacity: 0;
transform: translateZ(-1px);
transition: opacity 0.6s ease;
}
.hover-button:before {
content: "";
background: linear-gradient(56deg, #6fdefd 0%, #d8cdfa 46%, #fb0a76 100%);
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
border-radius: 10rem;
transition: opacity 0.4s ease;
}
.hover-button:hover {
transition: all 0.6s ease;
transform: translate(-50%, -50%) scale(1.35);
transform-origin: center;
&:after,
&:before {
opacity: 1;
transition: opacity 0.6s ease;
}
}
</style>
</head>
<body>
<div class="btn">
<button class="hover-button">
<span class="hover-text">Hover Me</span>
</button>
</div>
</body>
</html>
Output:
15. Striped Button Hover Effect:
This feature is employed to generate horizontal or diagonal stripes on the button, so that when the user hovers over the button, a striped effect will be displayed on it.
Example showcasing the hover effect on a button with stripes:
<!DOCTYPE html>
<html lang="en">
<head>
<title>STRIPED BUTTON HOVER EFFECT</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 65vh;
margin: 0;
padding: 0;
background-color: #f2ebeb;
}
.striped-button {
padding: 20px 35px;
display: inline-block;
color: white;
background-color: #397909;
border: none;
cursor: pointer;
font-weight: bold;
position: relative;
border-radius: 25px;
font-size: 19px;
overflow: hidden;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(249, 235, 235, 0.3) 5px, rgba(249, 235, 235, 0.3) 10px);
transition: background-position 0.3s;
background-size: 250% 250%;
}
.striped-button:hover {
background-position: 100% 100%;
}
</style>
</head>
<body>
<button class="striped-button">Hover Me!</button>
</body>
</html>
Output:
16. Diagonal Overlay Button Hover Effect:
This technique is employed to generate a diagonal overlay that spans from one corner of the button to the opposite corner. Consequently, when the user hovers over the button, a diagonal overlay effect will be displayed on the button.
Example showcasing the diagonal overlay button hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DIAGONAL OVERLAY BUTTON HOVER EFFECT</title>
<style>
body {
margin: 0;
height: 100%;
background: linear-gradient(to top, #f6d365 0%, #fda085 100%);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
.diagonal-overlay-button {
border: none;
display: block;
cursor: pointer;
outline: none;
overflow: hidden;
position: relative;
text-transform: uppercase;
color: black;
font-weight: 700;
font-size: 15px;
margin: 0 auto;
background-color:rgb(49, 211, 211);
padding: 15px 55px;
box-shadow: 0 5px 15px rgba(86, 83, 83, 0.2);
transition: all 0.5s ease-in-out;
}
.diagonal-overlay-button span {
position: relative;
z-index: 1;
}
.diagonal-overlay-button:after {
content: "";
position: absolute;
height: 450%;
width: 135%;
left: 0;
top: 0;
background: #da5ca7;
transition: all 0.5s ease-in-out;
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.diagonal-overlay-button:hover:after {
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
</style>
</head>
<body>
<div class="btn">
<button class="diagonal-overlay-button"><span>Hover Me!</span></button>
</div>
</body>
</html>
Output:
17. Diamond Border Button Hover Effect:
This feature is employed to generate a diamond-shaped border animation around the button. This results in displaying a diamond border animation when the button is hovered over by the user.
Example showcasing the hover effect of a button with a diamond-shaped border:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DIAMOND BORDER BUTTON HOVER EFFECT</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
height: 75vh;
}
.btn {
cursor: pointer;
position: relative;
padding: 12px 21px;
background: #5987a6;
color: #fef5f5;
font-size: 24px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
transition: all 1s;
}
.btn:after,
.btn:before {
content: " ";
position: absolute;
height: 5px;
width: 5px;
border: 0px solid #fef5f5;
transition: all 1s;
}
.btn:after {
top: -1px;
left: -1px;
border-top: 5px solid #15709b;
border-left: 5px solid #15709b;
}
.btn:before {
bottom: -1px;
right: -1px;
border-bottom: 5px solid #15709b;
border-right: 5px solid #15709b;
}
.btn:hover {
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
&:before,
&:after {
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<button class="btn">Hover Me!</button>
</div>
</body>
</html>
Output:
18. Bubble Coloring Button Hover Effect:
This technique is employed to generate a bubble coloring animation on the button. This implies that when a user hovers over the button, they will observe the bubble coloring effect on the button.
Example showcasing the hover effect on a button by changing the color transition when the cursor hovers over it:
<!DOCTYPE html>
<html lang="en">
<head>
<title> BUBBLE COLORING BUTTON HOVER EFFECT</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: beige;
height: 60vh;
}
.bubble-button {
--c: rgb(138, 58, 18);
color: var(--c);
border: 0.3em solid var(--c);
font-size: 18px;
border-radius: 20%;
background-color:antiquewhite;
width: 240px;
height: 60px;
position: relative;
overflow: hidden;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
letter-spacing: 2px;
line-height: 3em;
z-index: 1;
transition: 0.5s;
}
.bubble-button span {
position: absolute;
background-color: var(--c);
width: 25%;
height: 100%;
border-radius: 50%;
left: calc((var(--n) - 1) * 25%);
transform: translateY(150%);
transition: 0.5s;
transition-delay: calc((var(--n) - 1) * 0.1s);
z-index: -1;
}
.bubble-button:hover {
color: white;
}
.bubble-button:hover span {
transform: translateY(0) scale(2);
}
.bubble-button span:nth-child(1) {
--n: 1;
}
.bubble-button span:nth-child(2) {
--n: 2;
}
.bubble-button span:nth-child(3) {
--n: 3;
}
.bubble-button span:nth-child(4) {
--n: 4;
}
</style>
</head>
<body>
<button class="bubble-button">
Hover Me!<span></span><span></span><span></span><span></span></button>
</body>
</html>
Output:
Conclusion
In this guide, we've explored different CSS button hover effects alongside demonstrations. These effects can be applied to the Button component to enhance user interaction.
