In this tutorial we will show you the solution of disable button CSS, disable a button means here to create a button but the button is not in working condition.
The button is used to display that there is a button but when we click on this button, the button does not return us anything on click.
So, let us see how to create this type of button in HTML with help of CSS.
Step By Step Guide On Disable Button CSS :-
Now, to make a disable button with CSS, there are many ways which we can use.
To disable a button, we just have to html property disabled and to make it look like disable with help of CSS, we have to use CSS code.
Now, let us understand the below example to make the button disabled with help of html and CSS.
<!DOCTYPE html>
<html>
<head>
<title> CSS tutorials </title>
<style>
button {
border: 1px solid #0066cc;
background-color: #0099cc;
color: #ffffff;
padding: 5px 10px;
}
button:hover {
border: 1px solid #0099cc;
background-color: #00aacc;
color: #ffffff;
padding: 5px 10px;
}
button:disabled,
button[disabled]{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
CSS link style example
</h2>
<button type="button" disabled>
Disable Button
</button>
<button type="button">
Active Button
</button>
</body>
</html>- As, here we see that we that in above example we show you an example in which html and CSS codes are used.
- Here, first of all we create a basic structure of html, in which we use <!DOCTYPE html> which defines the type of document. And next one is our html tags. These tags are paired tag and all the data regarding html is written inside these tags.
- After we use our head tag which is again paired tag and contains title and meta information of the webpage. The data written inside head is not showed on the webpage.
- Now, next is our title tag which defines the title of webpage. The tag which has its closing tag is known as paired tag. So, this is again paried tag.
- Now, next is body which is main tag of html. The data which we written inside body is showed in webpage. Mostly all tags which are helpful to show data or information on the screen is written under the body tag
- As, we see above that we create two types of buttons. The first button is active whereas the another one is disabled using the disabled in button.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand how to disable buttons in CSS.
I hope this tutorial on disable button CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
