Crea tu web, tutor html, css
 

El efecto cortina en un botón

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

En HTML se puede consturir un bloque con aspecto e botón de diferentes formas. En este ejemplo voy a usar un bloque div con un link en su interior. El aspecto lo ajustaremos con CSS.
<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