Pure CSS Disabled Buttons
Last Updated :
30 Jan, 2022
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>
<button class="pure-button pure-button-disabled">
Button Disabled 1
</button>
<button class="pure-button" disabled>
Button Disabled 2
</button>
</body>
</html>
|
Output:
Pure CSS Disabled Buttons
Reference: https://purecss.io/buttons/#disabled-buttons
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...