Wednesday, June 14, 2017

How to create disabled buttons using HTML and CSS

How to create disabled buttons using HTML and CSS

Disabled Buttons

Disabled button style using the opacity and cursor property




Sample code: To Create Disabled Buttons


<!DOCTYPE html>
<html>
<head>
<style>
    .button
    {
        background-color: green;
        border: none;
        color: black;
        padding: 14px 28px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 2px;
        cursor: pointer;
    }
    .disabled { opacity:0.5; cursor:not-allowed; }
</style>
</head>
<body>
    <h2>Disabled Buttons</h2>
    <p>Disabled button style using the opacity and cursor property</p>
    <button class="button">Normal Button</button>
    <button class="button disabled">Disabled Button</button>
</body>
</html>