¡Hola! En este artículo, te enseñaré cómo crear una animación CSS slide para botones de manera sencilla y efectiva. Esta animación es perfecta para agregar un toque de estilo a tus botones y hacer que tu sitio web sea más atractivo.
Paso 1: Crear el HTML
Primero, debemos crear el HTML para nuestros botones. Aquí te muestro un ejemplo:
<div id="outer">
<div class="button_slide slide_down">BUTTON: SLIDE DOWN</div>
<br /><br /><br />
<div class="button_slide slide_right">BUTTON: SLIDE RIGHT</div>
<br /><br /><br />
<div class="button_slide slide_left">BUTTON: SLIDE INSIDE</div>
<br /><br /><br />
<div class="button_slide slide_diagonal">BUTTON: SLIDE DIAGONAL</div>
<br /><br /><br />
</div>Paso 2: Agregar estilos CSS
Ahora, debemos agregar los estilos CSS para nuestros botones. Aquí te muestro el código:
.button_slide {
color: #000;
border: 2px solid rgb(216, 2, 134);
border-radius: 0px;
padding: 18px 36px;
display: inline-block;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
box-shadow: inset 0 0 0 0 #D80286;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_down:hover {
box-shadow: inset 0 100px 0 0 #D80286;
}
.slide_right:hover {
box-shadow: inset 400px 0 0 0 #D80286;
}
.slide_left:hover {
box-shadow: inset 0 0 0 50px #D80286;
}
.slide_diagonal:hover {
box-shadow: inset 400px 50px 0 0 #D80286;
}
#outer {
width: 364px;
margin: 50px auto 0 auto;
text-align: center;
}Explicación del código
En el código anterior, utilizamos la propiedad box-shadow para crear el efecto de deslizamiento en los botones. La pseudoclase :hover se utiliza para aplicar el efecto de deslizamiento cuando el usuario pasa el mouse sobre el botón.
La propiedad box-shadow se utiliza para crear una sombra dentro del botón. La primera parte de la propiedad box-shadow especifica la posición de la sombra, y la segunda parte especifica el color de la sombra. En este caso, utilizamos inset para crear una sombra dentro del botón.
La propiedad transition se utiliza para aplicar un efecto de transición suave al botón cuando se pasa el mouse sobre él.
Resultado
Aquí te muestro el resultado final:
Conclusión
En este artículo, te enseñé cómo crear una animación CSS slide para botones de manera sencilla y efectiva. Esta animación es perfecta para agregar un toque de estilo a tus botones y hacer que tu sitio web sea más atractivo. Recuerda que la práctica y la experimentación son clave para mejorar tus habilidades en diseño web. ¡Y listo!