2.9 KiB
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