Animated Next Button | Hover Button Effect | HTML & CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Animated Next Button</title>
</head>
<body>
<a href="#">
<span>NEXT</span>
</a>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
background: linear-gradient(-26deg, #23bfe2,#6e41bb 50%, #2e2e2e 50%, #668695 100%);
}
a{
display: flex;
padding: 12px 60px;
font-size: 40px;
color: #fff;
background: blue;
text-decoration: none;
font-weight: 900;
box-shadow: 6px 6px 0 #000;
transition: 0.5s;
transform: skewX(-15deg);
}
a:hover{
padding: 12px 80px;
box-shadow: 10px 10px 0 orange;
}
a span{
margin-left: -15px;
transition: 0.5s;
}
a:hover span{
margin-left: -35px;
}
a::after{
position: relative;
content: '\f105';
font-size: 55px;
left: 10px;
font-family: fontAwesome;
transition: 0.5s;
}
a:hover::after{
content: '\f105\f105\f105';
left: 25px;
animation: ani 0.6s infinite alternate;
}
@keyframes ani {
0%{
color: #fff;
}
100%{
color: orange;
}
}
Comments
Post a Comment