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.
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 class="root">
<button class="btn-common btn btn1">Click me!</button>
<button class="btn-common bnt btn2">Don't touch me!</button>
</div>
</body>
</html>.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 class="root">
<button class="btn-common btn btn1">Click me!</button>
<button disabled class="btn-common btn btn2">Don't touch me!</button>
</div>
</body>
</html>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 class="root">
<button class="btn btn-common pointer">Click me!</button>
<button class="btn btn-common disable">Don't touch me!</button>
</div>
</body>
</html>
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 class="btn-common btn" disabled>Don't touch me!</button>