freeCodeCamp/guide/spanish/css/css-buttons/index.md

title	localeTitle
CSS Buttons	Botones CSS

Botones CSS

• Puede aplicar estilo a cualquier botón pulsable (elemento <button> HTML)

<button>Click Me</button>

• El botón predeterminado se parece a lo siguiente:

Estilo de un botón

Puede cambiar varias propiedades de un botón para cambiar su apariencia.

Para agregar sombras al botón use la propiedad box-shadow .

Para agregar transparencia a un botón para un efecto deshabilitado use la opacity la propiedad.

Para eliminar los márgenes y crear un grupo de botones, agregue float:left/right propiedad float:left/right .

Para crear un grupo de botones pero con los bordes, use la propiedad float y agregue una border property .

Para crear un grupo vertical de botones use display: block property .

Color del boton

Para cambiar el color de fondo de un botón, use la propiedad de color de fondo:

button {background-color: #6ba0f4;}

Para agregar un borde de color a un botón, use la propiedad de borde:

button { 
  background-color: #FFF; 
  color: #FFF; 
  border: 2px solid #6ba0f4; 
 } 

Tamaño del texto del botón

Para cambiar el tamaño de fuente del texto de un botón, use la propiedad de tamaño de fuente:

button {font-size: 20px;}

Acolchado de botones

Para cambiar el relleno de un botón, use la propiedad de relleno:

button {padding: 15px 30px;}

Ancho del botón

Para cambiar el ancho de un botón, independientemente del contenido del texto, use la propiedad de ancho:

button {width: 250px;}

Botones redondos

Para crear botones redondeados, use la propiedad border-radius:

button {border-radius: 50%;}

Botones Hoverable

Para cambiar el estilo de un botón cuando mueva el mouse sobre él, use el: selector de desplazamiento:

button:hover { 
  background-color: #0E2C5B; 
  color: #FFF; 
 } 

Para determinar la velocidad del efecto de desplazamiento, utilice la transition-duration la propiedad.

Botones desactivados

Para deshabilitar un botón, use la propiedad del cursor:

button { 
  cursor: not-allowed; 
 } 

Más información:

• https://www.w3schools.com/css/css3_buttons.asp
• https://www.w3schools.com/howto/howto css animate_buttons.asp