disabling button on hover and click cursor not working-CodePudding

I need to add a common class name 'btn-common' to all buttons then similar common class 'btn' to all buttons, set the width of each button to 100px and the height to 40px, remove the border of the button and set the border radius to 10px.

Add a class name btn1 to the first button, set the cursor to click when the mouse passes over it in the class name
Add a class name btn2 to the second button, this button is disabled and the cursor becomes disabled when the mouse passes over it

I have done those except the last 2 - hover and click on buttons, it's not working.

.btn {
    width:100px;
  height:40px;
  border-radius: 10px;
  border: none;
}


.btn1{
  cursor: pointer;
}


.btn2:disabled{
   
  cursor:disabled;
}

.btn-common {
  float: left;
  margin: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./common.css">
    <title>Button</title>
</head>

<body>
    <div >
      <button >Click me!</button>
      <button >Don't touch me!</button>
    </div>
</body>

</html>

CodePudding user response：

.btn {
    width:100px;
  height:40px;
  border-radius: 10px;
  border: none;
}


.btn1{
  cursor: pointer;
}


.btn2:disabled{
   
  cursor:not-allowed;
}

.btn-common {
  float: left;
  margin: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./common.css">
    <title>Button</title>
</head>

<body>
    <div >
      <button >Click me!</button>
      <button disabled >Don't touch me!</button>
    </div>
</body>

</html>

CodePudding user response：

Just create two new classes .pointer and .disable and use accordingly

<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        background: orange;
      }

      .btn {
        width: 100px;
        height: 40px;
        border-radius: 10px;
        border: none;
      }

      .btn-common {
        float: left;
        margin: 10px;
      }

      button.pointer {
        cursor: pointer;
      }

      button.disable:hover {
        cursor: not-allowed;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div >
      <button >Click me!</button>
      <button >Don't touch me!</button>
    </div>
  </body>
</html>

CodePudding user response：

cursor: disabled; does not exist, change it to cursor: not-allowed;.

But you don't need to use extra classes for that. In this scenario it should be enough to do something like this:

.btn {
    cursor: poiner;
}
.btn[disabled] {
    cursor: not-allowed;
}

Then you will have to just add disabled to the button.

<button  disabled>Don't touch me!</button>