I am currently working on a button using Styled Components. However, even when the button is in a disabled state (:disabled), it still exhibits hover behavior that should not be present. I am wondering if there is a proper way to prevent hover effects when the button is disabled.
Here is the style definition:
import styled from "styled-components";
const Button = styled.button`
background-color: #023047;
border: 1px solid #023047;
color: white;
padding: 4px 16px;
width:100%;
border-radius: 4px;
outline: 0;
text-transform: uppercase;
margin: 10px 0px;
cursor: pointer;
box-shadow: 0px 2px 2px #023047;
transition: ease background-color 250ms;
:disabled {
cursor: default;
opacity: 0.7;
}
:hover {
background-color: #ffb703;
box-shadow: 0px 2px 2px #ffb703;
}
:active {
background-color: #023047;
box-shadow: 2px 2px 0 #023047;
}
`;
const MyButton = ({ content, disabled = false}) => {
return <Button disabled={disabled}>{content}</Button>;
}
This is how it is being used:
<MyButton content="I am active" /> // displays active/hover effect correctly
<MyButton content="I am disabled" disabled={true} /> // appears disabled but still reacts to hover
Any suggestions on how to disable the hover effect when the button is disabled?