Botones CSS

Aprende como dar estilos a los botones usando CSS.

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

A continuación mostramos un botón por defecto y un botón personalizado con los estilos CSS:

Por defecto    Personalizado

Para cambiar el color de fondo de un botón usamos la propiedad background-color:

.botonverde { background-color: #4caf50; }
.botonazul { background-color: #008cba; }
.botonrojo { background-color: #f44336; }
.botongris { background-color: #e7e7e7; }
.botonnegro { background-color: #555555; }

Verde  Azul  Rojo  Gris  Negro 

Tamaños de botones

Para cambiar el tamaño de letra en los botones se utiliza la propiedad font-size: 

.botonverde { background-color: #4caf50; font-size: 10px; }
.botonazul { background-color: #008cba; font-size: 12px; }
.botonrojo { background-color: #f44336; font-size: 16px; }
.botongris { background-color: #e7e7e7; font-size: 20px; }
.botonnegro { background-color: #555555; font-size: 24px; }

Verde  Azul  Rojo  Gris  Negro 

Relleno de Botones

Para cambiar el relleno dentro de los botones se usa la propiedad padding:  

.botonverde { padding: 10px 24px; }
.botonazul { padding: 12px 28px; }
.botonrojo { padding: 14px 40px; }
.botongris { padding: 32px 16px }
.botonnegro { padding: 16px; }

Verde  Azul  Rojo  Gris  Negro 

Botones redondeados

Para redondear los bordes de los botones se utiliza la propiedad border-radius:

.botonverde { border-radius: 2px; }
.botonazul { border-radius: 4px; }
.botonrojo { border-radius: 8px; }
.botongris { border-radius: 12px; }
.botonnegro { border-radius: 50%; }

Verde  Azul  Rojo  Gris  Negro 

Botones con bordes coloreados

Para colorear los bordes de los botones se utiliza la propiedad border:

.botonverde { background-color: white; border: 2px solid #4caf50; }
.botonazul { background-color: white; border: 2px solid #008cba; }
.botonrojo { background-color: white; border: 2px solid #f44336; }
.botongris { background-color: white; border: 2px solid #e7e7e7; }
.botonnegro { background-color: white; border: 2px solid #555555; }

Verde  Azul  Rojo  Gris  Negro 

Botones con efecto hover

Para cambiar el estilo de un botón cuando el puntero del mouse se sobrepone al botón, se utiliza el selector :hover:

Tip: Se puede usar la propiedad transition-duration para determinar la velocidad del efecto :hover.

.botonverde {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.botonverde:hover {
  background-color: #4caf50; /* verde */
  color: white;
}
...

Verde

Botones con sombras

Para especificar sombras se utiliza la propiedad box-shadow a los botones:

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

Verde

Botones deshabilitados

Para dar el estilo a botones deshabilitados se utiliza la propiedad opacity para agregarle transparencia y así como también se utiliza la propiedad cursor con el valor de not-allowed, lo cual despliega un signo de "no estacionarse" cuando el cursor del mouse se encuentre sobre el botón:

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

Verde

Ancho de los botones

Predeterminadamente, el tamaño de los botones es determinado por el texto del contenido. Se utiliza la propiedad width para cambiar el ancho del botón:

.botonverde { width: 250px; }
.botonazul { width: 50%; }
.botonrojo { width: 100%; }

Verde

Azul

Rojo

Grupo de Botones Horizontal

Para crear un grupo de botones se eliminan los margenes y se agrega float: left; a cada botón, así como sus bordes y para evitar doble borde derecho del último boton se agrega :not(last:child):

.botonverde {
  float: left;
  border: 1px solid green;
  cursor: pointer;
}
.grupobotones .botonverde:not(:last-child) {
  border-right: none; /* Evita doble borde */
}

Grupo de Botones Vertical

Se utiliza display: block; en lugar de float: left; para agrupar los botones hacia abajo, en lugar de hacia su lado:

.botonverde {
  display: block;
  border: 1px solid green;
  cursor: pointer;
}
.grupobotones .botonverde:not(:last-child) {
  border-bottom: none; /* Evita doble borde */
}

Botones Animados

Agregar una flecha al posicionar el puntero del mouse sobre el botón:

<button class="botonverde">
  <span>Botón</span>
</button> 

Boton