Al desarrollar un sitio web es importante que cuidemos los aspectos estéticos y uno muy importante es el de los botones, en este tutorial vamos a crear un botón usando HTML y CSS de una forma sencilla y hasta con una animación.
Lo primero es crear la etiqueta con la que usaremos el botón.
<a href="#" class="button">Mi Botón</a>
Ahora en nuestro archivo CSS vamos a convertir nuestra etiqueta «a» en un bloque con la propiedad display y el valor inline-block esto creará un bloque al cuál vamos a ponerle propiedades para su tamaño, color de fondo, color de texto y un decorado en el borde
.button{
display:inline-block; // Con esto el botón tendrá propiedades de bloque
padding: .5rem 1.6rem; // el primer valor nos dará la altura y el segundo la anchura del botón
text-decoration: none; // nos aseguramos de que no se subraye el texto
color: #fff; // El color del texto
background: #FFC000; // Color del fondo
font-family : 'Baloo Tamma 2',
cursive;
font-weight:700;
border-radius: 10px; // le damos redondeo a las esquinas
text-transform:uppercase
}
si abrimos nuestro HTML ahora veremos el botón, lo siguiente será darle propiedades a su evento hover, lo que haremos es que al pasarle el mouse cambie su color de fondo y aparezca un borde, para eso utilizaremos la pseudo-clase :hover y ahí aplicaremos nuestros valores para el evento.
.button:hover{
background: #DA0033;
box-shadow: 3px 3px 3px #000; // con esto aplicamos sombra al botón
}
Ahora, para suavizar un poco la transición y crear una «animación» vamos a agregar el atributo transition al botón, este atributo nos permite establecer cuánto tiempo tarda en cambiar de un estado a otro, en este caso, cuánto tarda en cambiar el color de fondo, agregamos esto:
transition: .3s;
Y listo, al agregar esto tendremos el siguiente resultado:
See the Pen Creación de botón con CSS by Enrique (@Kikemonk) on CodePen.