Open In App
Related Articles

Pure CSS Disabled Buttons

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
             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:

Pure CSS Disabled Buttons

Pure CSS Disabled Buttons

Reference: https://purecss.io/buttons/#disabled-buttons



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads