Pure CSS Disabled Buttons
Buttons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Disabled Button is used to create a disabled button. To make the disabled button, we will use the Pure CSS class “pure-button-disabled” with the class “pure-button”. We can also create a disabled button using disabled attribute.
Disabled Button used Class:
- pure-button-disabled: It is used to disable the Pure CSS button. This class is used with the pure-button class.
Syntax:
-
Disabled button using Pure CSS Class:
<button class="pure-button pure-button-disabled"> Disabled Button </button>
-
Disabled button using disabled Attribute:
<button class="pure-button" disabled> Disabled Button </button>
Example:
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;" > w3wiki </ 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 > |
Output:
Reference: https://purecss.io/buttons/#disabled-buttons