Hello Guys,
In this tutorial , we are create border animation using css. The css border animation using hover. Hover is used to create border animation when we hover over a text. we are going to use are before , after and hover selectors.
Animation is to divide into two parts. The top and right will be done at one time using before selector , Bottom and left are done at one time using after selector. Animation looking like below picture :
HTML Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Button Animation</title>
</head>
<body>
<div class="button_animation">
<h1>Animation</h1>
</div>
</body>
</html>
CSS Code :
body {
margin: 0;
padding: 0;
background: dark;
}
.button_animation {
left: 40%;
top: 40%;
position: absolute;
width: 300px;
text-align: center;
}
h1 {
position: relative;
}
.button_animation::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
background: transparent;
border: 2px solid transparent;
}
.button_animation:hover::before {
animation: animate 3s linear forwards;
}
@keyframes animate {
0% {
width: 0;
height: 0;
border-top-color: black;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
.button_animation::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
background: transparent;
border: 2px solid transparent;
}
.button_animation:hover::after {
animation: animates 3s linear forwards;
}
@keyframes animates {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: black;
}
50% {
width: 0;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
}
Complete Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Button Animation</title>
<style>
body {
margin: 0;
padding: 0;
background: dark;
}
.button_animation {
left: 40%;
top: 40%;
position: absolute;
width: 300px;
text-align: center;
}
h1 {
position: relative;
}
.button_animation::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
background: transparent;
border: 2px solid transparent;
}
.button_animation:hover::before {
animation: animate 3s linear forwards;
}
@keyframes animate {
0% {
width: 0;
height: 0;
border-top-color: black;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
.button_animation::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
background: transparent;
border: 2px solid transparent;
}
.button_animation:hover::after {
animation: animates 3s linear forwards;
}
@keyframes animates {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: black;
}
50% {
width: 0;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
}
</style>
</head>
<body>
<div class="button_animation">
<h1>Animation</h1>
</div>
</body>
</html>
Output :
If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support. 🙏
0 Comments