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;">
        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>

Output:

Reference: https://pure-css.github.io/#disabled-buttons

Pure CSS Disabled Buttons

Explore