EN
CSS - disabled button
0
points
In this article, we would like to show you how to create a disabled button using CSS.
Quick solution:
.disabled-button {
opacity: 0.75;
cursor: not-allowed;
}
Practical example
In this example, we create a style for the disabled button by changing it's opacity and cursor. Notice that it doesn't disable the button's event handler, you have to remove its onclick attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
button {
height: 50px;
margin: 0 0 0 25px;
}
.disabled {
opacity: 0.75;
cursor: not-allowed;
}
</style>
<script>
function handleClick(){
console.log('Button clicked...');
}
</script>
</head>
<body>
<button class="disabled">Disabled</button>
<button onclick="handleClick()">Enabled</button>
</body>
</html>