Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Create a disabled look of a button with CSS
To create a disabled button look in CSS, you can use the opacity property to make the button appear faded and less interactive. This visual effect helps users understand that the button is not functional.
Syntax
selector {
opacity: value;
}
Example: Basic Disabled Button Look
You can try to run the following code to create a disabled look of a button −
<!DOCTYPE html>
<html>
<head>
<style>
.btn1 {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 15px;
cursor: pointer;
margin: 10px;
}
.btn2 {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 15px;
opacity: 0.5;
cursor: not-allowed;
margin: 10px;
}
</style>
</head>
<body>
<h2>Button States</h2>
<p>Compare the normal and disabled button appearance:</p>
<button class="btn1">Enabled Button</button>
<button class="btn2">Disabled Button</button>
</body>
</html>
Two buttons appear: one fully visible green button labeled "Enabled Button" and one faded (50% opacity) green button labeled "Disabled Button" with a not-allowed cursor.
Enhanced Disabled Button Styling
For a more comprehensive disabled look, combine opacity with other properties −
<!DOCTYPE html>
<html>
<head>
<style>
.enhanced-btn {
background-color: #007bff;
color: white;
padding: 12px 24px;
border: 2px solid #007bff;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease;
}
.enhanced-btn:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.enhanced-btn.disabled {
opacity: 0.4;
cursor: not-allowed;
background-color: #cccccc;
border-color: #cccccc;
color: #666666;
pointer-events: none;
}
</style>
</head>
<body>
<h2>Enhanced Button Styling</h2>
<button class="enhanced-btn">Active Button</button>
<button class="enhanced-btn disabled">Disabled Button</button>
</body>
</html>
Two buttons appear: one blue active button with hover effects and one grayed-out disabled button with reduced opacity that cannot be interacted with.
Conclusion
The opacity property is the primary method for creating a disabled button appearance. Combine it with cursor: not-allowed and color changes for a complete disabled state that clearly communicates non-functionality to users.
Updated on: 2026-03-15T13:03:29+05:30
439 Views
Advertisements