Necesito agregar un nombre de clase común 'btn-common' a todos los botones, luego una clase común similar 'btn' a todos los botones, establecer el ancho de cada botón en 100px y la altura en 40px, quitar el borde del botón y establecer el radio del borde a 10px.
Los he hecho, excepto los últimos 2: pasar el mouse y hacer clic en los botones, no funciona.
.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>Simplemente cree dos nuevas clases .pointer y .disable y utilícelas en consecuencia
<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; no existe, cámbielo a cursor: not-allowed; .
Pero no necesita usar clases adicionales para eso. En este escenario, debería ser suficiente hacer algo como esto:
.btn { cursor: poiner; } .btn[disabled] { cursor: not-allowed; } Luego, solo tendrá que agregar disabled al botón.
<button class="btn-common btn" disabled>Don't touch me!</button>