Estilización de Botones en HTML y CSS

Clase 14 de 18 • Curso Práctico de HTML y CSS

Clase anteriorSiguiente clase

Resumen

¡Esta es la última sección de nuestro main! Vamos a generar nuestros estilos para que no se note la diferencia entre los nuestros y los de Google.

Cómo aplicar los estilos de los botones

  1. Llamamos la clase que contiene los botones dentro de la etiqueta main.
  2. Ajustamos el width: 530px.
  3. Ajustamos el margin: 0 auto para que se posicione siempre en el centro.
14.1.png

Definir la posición de los botones

  1. Llamamos la clase que contiene los botones que contenga una etiqueta div con main .main-buttons div.
  2. Ajustamos el display en inline-block. Esto es porque por defecto el navegador le asigna a las cajas display: block, lo que hace que esté una encima de otra. Al usar inline-block las ponemos una a lado de otra. Por esto le asignamos la misma propiedad a las dos cajas.
14.2.png

Pasos para darle diseño de caja a los botones

  1. Llamamos la clase que contiene los botones que contenga la etiqueta button con main .main-buttons button.
  2. Le damos una altura con height: 36px.
  3. Ajustamos el color de fondo con background-color: #f2f2f2.
  4. Cambiamos el borde para que no se desplaze al colocar el cursor encima con border: 1px solid #f2f2f2.
  5. Cambiamos el tamaño de fuente con font-size: 14px.
  6. Cambiamos el color de la fuente con color: #5f6368.
  7. Redondeamos los bordes con border-radius: 5px.
  8. Añadimos espacio interno a los lados con padding: 0 15px.
  9. Añadimos una separación entre los botones con margin-right: 15px.
14.3.png

Cómo poner el efecto hover en los botones

Ahora necesitamos que al pasar el cursor sobre los botones, cambie el color del texto y se cree una sombra alrededor de la caja. Para ello:

  1. Llamamos la clase que contiene los botones con el pseudo-elemento hover. Así: main .main-buttons button:hover.
  2. Generamos un borde sólido con border: 1px solid #c6c6c6.
  3. Generamos una sombra con box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1).
  4. Cambiamos el color del texto con color: #222.
  5. Añadimos un color de fondo con background-color: #f8f8f8.
  6. Agregamos cursor: pointer para que el ícono del cursor cambie a una manita al posicionarlo sobre los botones.
14.4.png

En nuestro navegador deberíamos tener un resultado como este:
image.png

Contribución creada con aportes de: Juan Alberto López López, Wandy Rafael Santana Evangelista y José Miguel Veintimilla.