Los botones son uno de los elementos de interfaz de usuario más comunes. Se utiliza para que los usuarios interactúen con un sistema y tomen medidas al hacer selecciones. El botón deshabilitado de CSS puro se usa para crear un botón deshabilitado. Para hacer el botón deshabilitado, usaremos la clase Pure CSS “ pure-button-disabled ” con la clase “pure-button” . También podemos crear un botón deshabilitado usando el atributo deshabilitado.
Botón deshabilitado Clase utilizada:
- pure-button-disabled: Se utiliza para deshabilitar el botón Pure CSS. Esta clase se usa con la clase de botón puro.
Sintaxis:
-
Botón deshabilitado usando Pure CSS Class:
<button class="pure-button pure-button-disabled"> Disabled Button </button> -
Botón deshabilitado usando el atributo deshabilitado:
<button class="pure-button" disabled> Disabled Button </button>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity= "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous"> </head> <body style="text-align: center"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Pure CSS Disabled Buttons</h3> <!-- Disabled Button using Pure CSS Class --> <button class="pure-button pure-button-disabled"> Button Disabled 1 </button> <!-- Disabled Button using disabled Attribute --> <button class="pure-button" disabled> Button Disabled 2 </button> </body> </html>
Producción:
Botones deshabilitados de CSS puro
Referencia: https://purecss.io/buttons/#disabled-buttons