This video showcases the issue
I am looking to implement a hover animation where an element slides to the right, but without moving the button and title upwards upon hover.
Button Code:
button{
width: 200px;
padding: 15px 0;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #0da7ce;
background: transparent;
color: white;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 0 10px #0da7ce;
}
Button Animation Code:
span{
background: #0da7ce;
height: 100%;
width: 0;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}
button:hover span{
width: 100%;
}
button:hover{
border: none;
}