Hello, Today we’ll see how to create amazing border growing button animation on hover in this hover animation series. but let me first tell you what’s actually hover animation series is. In this series, I’m showing you an awesome animation effect on hovering.
For this animation effect first, we create out index.html and work with HTML structure.
<body>
<button>
<span>/<span>
submit
</button>
</body>That’s perfect. Let’s style with CSS.
@import url(https://fonts.googleapis.com/css?family=BenchNine:700);body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #222;
}button {
border: none;
padding: 12px 40px;
background-color: #4834d4;
color: white;
font-family: 'BenchNine';
font-size: 22px;
text-transform: uppercase;
cursor: pointer;
position: relative;
}
Output:
We’re done with the basic structure and styling part. Now move to the animation part.
Pseudo Class:
Make a border of the button that is actually placed outside the button using pseudo-class.
button:before {
content: "";
position: absolute;
width: 24px;
height: 24px;
top: -5px;
left: -5px;
border-top: 2px solid #4834d4;
border-left: 2px solid #4834d4;
transition: all 0.25s;
}button:after {
content: "";
position: absolute;
width: 24px;
height: 24px;
bottom: -5px;
right: -5px;
border-bottom: 2px solid #c47135;
border-right: 2px solid #c47135;
transition: all 0.25s;
}
Almost everything is done. At last, just change the border size on hover.
button:hover:before,
button:hover:after {
height: 100%;
width: 100%;
}and we’re done!
Thanks for reading :)