ejemplo de botón animado con CSS en español

en este ejemplo te muestro cómo puedes hacer un botón animado es decir que cuando si podemos el cursor encima de él se ejecute una pequeña animación para llamar la atención y todo esto utilizando solo estilos CSS

veamos cómo funciona:

<!DOCTYPE html>
<html>
<head>
<style>
.boton {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.boton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.boton span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.boton:hover span {
padding-right: 25px;
}

.boton:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>

<h2>Botón animado</h2>

<button class="boton"><span>Encima </span></button>

</body>
</html>

 

empezaremos la explicación por la parte de abajo en el apartado body de la página web en la que tenemos un botón con una clase llamada botón

como ves no me he matado mucho 😉

dentro de este botón tenemos el texto que está envuelto en la etiqueta span para poder identificarlo y animarlo cuando situemos el cursor encima

y ahora vamos a hablar de los estilos CSS que es dónde se diseña el botón animado y es dónde se define qué propiedades de los estilos quieres animar

primero definimos la clase boton la cual tiene el aspecto básico de nuestro botón … el borde el fondo los colores etcétera

y después viene la definición del texto que está dentro del botón, recuerda que está puesto con la etiqueta span para que podamos animar este texto

también tenemos una clase para indicar el pequeño icono que aparecerá después del texto y si te fijas la opacidad es 0 es decir en principio no lo veremos

y para que se ejecute la animación del botón tenemos dos clases más :

una para el botón en si el cual pondremos un poco de padding a la derecha para desplazar el texto y en la etiqueta span hacemos que el pequeño iconito se visualice poniendo la opacidad en 1

cómo has visto en este pequeño ejemplo es muy fácil tener botones animados en nuestra página web haciendo que llame más la atención al visitante