346
CSS animated button effect on hover
In this blog post, I will show you how to create a CSS animated button effect on hover. This effect can make your website more interactive and engaging for your visitors.
The basic idea is to use CSS transitions and transforms to change the appearance and position of the button when the user hovers over it. We will use two elements: a
element for the button background and a element for the button text. We will also use some pseudo-elements to create a shadow and a border effect.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS animated button effect on hover</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" class="btn">
<span>Button</span>
</a>
</body>
<html>CSS
body{
background-color: #333;
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
}
.btn{
width: 250px;
height: 100px;
color: #fff;
background: transparent;
font-family: arial black;
font-size: 3em;
font-weight: 700;
line-height: 100px;
text-align: center;
text-decoration: none;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 10px 15px 7px;
border: 3px solid #fff;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.9s ease 0s;
}
.btn:focus{
color: #555;
}
.btn:hover{
color: #fff;
background: transparent;
border-color: #ff6600;
box-shadow: 0 0 0 5px rgba(0,0,0,0.5);
}
.btn::before{
content: '';
background: #ff6600;
height: 200%;
width: 100%;
transform: skewY(17deg);
position: absolute;
left: 0;
top: -240%;
z-index: -1;
transition: all 0.9s ease 0s;
}
.btn:hover::before{
top: -50%;
}For More Tutorials Please Click Here
