El efecto cortina en un botón (solo CSS)
Para resaltar o llamar la atención sobre un botón que queramos que sea pulsado vale casi todo. En este caso 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.
Este efecto se logra aplicando pseudo selectores y estilos CSS a cualquier botón. 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.
En esta páginas tienes el como se hace de este efecto
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