CSS Buttons

---

Aprende a diseñar botones usando CSS.

---

Estilo básico de un botón

Botones con estilo básico.

Ejemplo:

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Ver ejemplo

---

Botones de color

Usa la propiedad background-color para cambiar el color de fondo de un botón:

Ejemplo:

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

Ver ejemplo

---

Tamaños de botones

Utilice la propiedad font-size para cambiar el tamaño de fuente de un botón:

Ejemplo:

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Ver ejemplo

---

Use la propiedad padding para cambiar el relleno de un botón:

Ejemplo:

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Ver ejemplo

---

Botones redondeados

Use la propiedad border-radius para agregar esquinas redondeadas a un botón:

Ejemplo:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Ver ejemplo

---

Bordes de color

Use la propiedad border para agregar un borde de color a un botón:

Ejemplo:

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
}

Ver ejemplo

---

Botones estilo Hover

Use el selector :hover para cambiar el estilo de un botón cuando mueve el mouse sobre él.

Tip: Utilice la propiedad transition-duration para determinar la velocidad del efecto de "desplazamiento":

Ejemplo:

.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}

Ver ejemplo

---

Botones con sombra

Use la propiedad box-shadow para agregar sombras a un botón:

Ejemplo:

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Ver ejemplo

---

Botones deshabilitados

Use la propiedad opacity para agregar transparencia a un botón (crea una apariencia "deshabilitada").

Tip: También puedes agregar la propiedad cursor con un valor de "no permitido", que mostrará una "señal de prohibido estacionar" cuando pase el mouse sobre el botón:

Ejemplo:

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Ver ejemplo

---

Ancho del botón

De forma predeterminada, el tamaño del botón está determinado por su contenido de texto (tan ancho como su contenido). Use la propiedad width para cambiar el ancho de un botón:

Ejemplo:

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

Ver ejemplo

---

Grupos de botones

Elimina los márgenes y agrega float:left a cada botón para crear un grupo de botones:

Ejemplo:

.button {
  float: left;
}

Ver ejemplo

---

Grupo de botones bordeados

Use la propiedad border para crear un grupo de botones con borde:

Ejemplo:

.button {
  float: left;
  border: 1px solid green;
}

Ver ejemplo

---

Grupo de botones verticales

Use display:block en lugar de float:left para agrupar los botones uno debajo del otro, en lugar de uno al lado del otro:

Ejemplo:

.button {
  display: block;
}

Ver ejemplo

---

Botón en la imagen

Ubicar un botón sobre una imagen.

Ejemplo:

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

Ver ejemplo

---

Botones animados

Animación de botones.

Ejemplo:

Agregue una flecha al pasar el mouse:

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

Ver ejemplo

---

Ejemplo:

Agregue un efecto "presionado" al hacer clic:

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

Ver ejemplo

---

Ejemplo:

Fundido de entrada al pasar el mouse:

.button {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

Ver ejemplo

---

Ejemplo:

Agregue un efecto de "onda" al hacer clic:

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

Ver ejemplo

---

Traducido con 💚 desde W3Schools.com