<button onClick={() => resetBoard()}>
Reset Board
</button>
While trying to import an external CSS file as a module, I encountered a problem. The CSS file looks like this...
button {
background-color: #111827;
border: 1px solid transparent;
border-radius: .75rem;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
flex: 0 0 auto;
font-family: "Inter var";
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: .75rem 1.2rem;
text-align: center;
text-decoration: none #6B7280 solid;
text-decoration-thickness: auto;
transition-duration: .2s;
transition-property: background-color, border-color,
color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: auto;
}
button:hover {
background-color: #374151;
}
button:focus {
box-shadow: none;
outline: 2px solid transparent;
outline-offset: 2px;
}
@media (min-width: 768px) {
.button {
padding: .75rem 1.5rem;
}
}
;
I am looking to style the button tag which is imported as a module from the app.module.css file.