Tengo un botón creado con HTML y CSS que muestra texto al pasar el cursor sobre él. Lo que quiero lograr es que haya una animación de transición, ya que no he podido hacerla.
En el código HTML, el botón se trabaja con la etiqueta de enlace "a".
Espero que puedan recrear los códigos. Les dejo un enlace a una web para que puedan consultarlo en su totalidad: https://policies.esims.one/terms (el botón es el primero en aparece en la página).
.back-button{
font-weight: bold;
letter-spacing: normal;
line-height: 100%;
text-align: center;
text-decoration: none;
border-radius: 0px;box-shadow: none;padding: 5px 30px 5px 5px;
color: #181818;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px;
}
.back-button::before{
margin-right:10px;
background-image:url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/d7bb4928-a156-4682-9677-d0d5b47c3a21.png);
background-size:40px 40px;
display:inline-block;
width:40px;
height:40px;
border-radius:50%;
content:""
}
.back-button:hover:after{
content:"Home"
}
.mcnButton{
transition:.4s;
border-radius:50px!important;
box-shadow:#999 0 0 20px 0!important;outline:none;
user-select:none
}
.mcnButton:focus{
background:#eceff9!important;
color:#181818!important
}
<div style="display:flex;">
<a class="back-button mcnButton" href="https://www.example.com/" target="_self">
</a>
</div>