Efecto cortina de fondo
Para resaltar o llamar la atención sobre un botón que queramos que sea pulsado (como en un CTA) vale casi todo.
En este caso, al pasar el ratón por encima del botón, se va a producir un cambio de color de fondo del botón, pero de manera animada. Una barra de diferente color va a reemplazar gradualmente el fondo original.
Sería como si el bloque fuera llenándose de color de izquierda a derecha
Este efecto se logra aplicando pseudo selectores y estilos CSS a cualquier botón (o bloque div). Hay varias formas, esta es la que considero más simple y bastante efectiva.
Admite algunas variantes: como usar una cortina inclinada (con skew), una cortina más estrecha que el botón....¡Experimenta y aprende!.
El código HTML
<div class="boton">
<a href="destino.htm">
Pulsa aquí
</a>
</div>
Estilo CSS
El aspecto de botón se logra delimitando de alguna manera el bloque que forma el botón. Puede hacerse con un borde, con un fondo o con ambos. n este caso lo haremos con un fondo.
Al pasar el ratón se deslizará de izquierda a derecha una barra con otro color dando la apariencia de una cortina translucida.
.boton{
background:blue;
width: fit-content;
position:relative;
}
.boton a, .boton a:link{
font-family: sans-serif;
cursor: pointer;
position: relative;
display:block;
padding: 4px 20px;
text-decoration: none;
color: white;
z-index: 2;
}
.boton:after{
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:0;
background: red;
transition: width 800ms;
z-index:0;
}
.boton:hover:after{
width:100%;
}
El botón se crea con el bloque div, necesitamos que su posición sea relative para que sirva de referencia a la cortina. El ancho lo dejamos en función del contenido y aquí definimos el color de fondo del botón.
Dentro está el enlace, le damos posición relativa y defnimos el aspecto del texto ancla del enlace. Importante ponerle un z-index alto par que no se tape con la cortina.
El otro bloque se construye con un pseudo elemento :after (o :before). Es un bloque con posicinamiento absoluto respecto al cuadro del botón. En principio se define con ancho 0, y se le pone el color que deseemos, procurando que mantenga el contraste con el color del texto.
La propiedad que le da animación es un transition . Esta se aplica al ancho y en este caso dura 800ms.
Cuando el botón pase por encima entra en acción el selector :hover del botón que pone el ancho a 100% del botón, este valor se aplica según la transition definida para el botón:after