I can’t understand ho I can replicate this effect on button, like in this theme:(scroll below and look where button say "read more") https://hiroshi.qodeinteractive.com
my button class: border-button
.border-button {
font-family: "Montserrat";
display: inline-block;
text-decoration: none;
position: relative;
padding: 12px 8px;
color: #000;
overflow: hidden;
}
.border-button::before {
content: "";
color: black;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #000;
transform: translateX(-100%);
transition: transform 0.4s ease-out;
}
.border-button:hover::before {
color: black;
transform: translateX(0);
}
a:hover{
color: black;
}
>Solution :
CSS transition allows you to change property values smoothly, over a given duration.
Try using the transition property with background properties like this:
.myanime {
cursor: pointer;
background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
background-position: right bottom;
background-size: 300% 2px;
background-repeat: no-repeat;
}
.myanime:hover {
background-position: left bottom;
transition: background-position 1s;
}
<span class="myanime">read more</span>