I have a button for which I’m trying to animate the borders on hover. I have a working code, but the issue is that when you hover it, the radius on top left and bottom right starts at 0
and gets adjusted only when the animation finishes (you might need to zoom in to see what I’m talking about). It’s not a huge deal, but makes the button look unpolished.
Is there a way to make sure those borders are rounded at the beginning?
Here’s the code for the button:
.container {
width: 100%;
height: 200px;
background: wheat;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
position: relative;
display: block;
width: 180px;
z-index: 3;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
border: 1px solid black;
text-align: center;
padding: 8px 0;
color: black;
}
.btn:before, .btn:after {
display: block;
content: ' ';
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
position: absolute;
width: 0;
height: 0;
opacity: 0;
transition: opacity 200ms ease-in-out;
border-radius: 4px;
}
.btn:before {
top: -1px;
left: -1px;
}
.btn:after {
bottom: -1px;
right: -1px;
}
.btn:hover:before {
width: 180px;
height: calc(100%);
opacity: 1;
border-top: 2px solid white;
border-right: 2px solid white;
transition: width 300ms cubic-bezier(.07, .62, .61, 1), height 150ms 300ms cubic-bezier(.07, .62, .61, 1);
}
.btn:hover:after {
width: 180px;
height: calc(100%);
opacity: 1;
border-bottom: 2px solid white;
border-left: 2px solid white;
transition: width 300ms cubic-bezier(.07, .62, .61, 1), height 150ms 300ms cubic-bezier(.07, .62, .61, 1);
}
<div class="container"><a href="" class='btn'>Hover me</a></div>
2
Answers
Found the solution, in the end it was pretty simple, just needed to add
overflow:hidden
to the.btn
class.You need to change starting height for
:before
and:after
elements, because they don’t have any height at the beginning of the animation.