I need to apply the class name 'btn-common' to all buttons, followed by a common class 'btn' to each button. The width of each button should be set to 100px and the height to 40px, with the border removed and the border radius set to 10px.
- For the first button, add the class name btn1 and set the cursor to pointer when hovering over it
- Assign the class name btn2 to the second button, making it disabled with a disabled cursor when hovered over
I have completed everything except for the hover and click effects on the buttons, they are not functioning as expected.
.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>