CSS Disabled Button

Please Share On:

Definition:

You can make your html button not-clickable by using CSS properties. The CSS property that makes your button disable is “cursor: not-allowed;”. This property has disabled your button and shows no parking sign on mouse hover button.

To display the disabled button, it is a good practice to add transparency to a button.

Syntax:

.btn1 {cursor: not-allowed; opacity: 0.5;}
.btn2 {cursor: not-allowed; opacity: 0.5;}
.btn3 {cursor: not-allowed; opacity: 0.5;}
.btn4 {cursor: not-allowed; opacity: 0.5;}

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
		}
        .btn1 {cursor: not-allowed; opacity: 0.5;}
        .btn2 {cursor: not-allowed; opacity: 0.5;}
        .btn3 {cursor: not-allowed; opacity: 0.5;}
        .btn4 {cursor: not-allowed; opacity: 0.5;}
          
		</style>
	</head>
	
	<body>
	<h2>CSS Disable Buttons</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>
    <button class="button btn4">btn 4</button>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 522

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.