Saltar al contenido

Botón de estilo deshabilitado con CSS

septiembre 24, 2021
apple touch icon@2

Para todos los que usamos bootstrap, puede cambiar el estilo agregando la clase «deshabilitada» y usando lo siguiente:

HTML

<button type="button"class="btn disabled">Text</button>

CSS

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

Recuerde que agregar la clase «deshabilitado» no necesariamente deshabilita el botón, por ejemplo, en un formulario de envío. Para deshabilitar su comportamiento, use la propiedad disabled:

<button type="button"class="btn disabled" disabled="disabled">Text</button>

Un violín de trabajo con algunos ejemplos está disponible. aquí.

close