Disabled button with Styled Components shows hover state

Question

I'm creating a button using Styled Components, but even when is :disabled, it shows :hover behaviour which it should not. I'm wondering if there's a right way to disable hover if the button is already :disabled

this is the 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 is being used:

<MyButton content="i am active" /> // shows active/hover correctly

<MyButton content="i am disabled" disabled={true}  /> // is disabled but changes color on hover

any suggestion to disable hover when the button is disabled?

Does this answer your question? [Hover and Active only when not disabled](https://stackoverflow.com/questions/11600687/hover-and-active-only-when-not-disabled) — Dane Brouwer, Oct 10 '22 at 08:13

score 0 · Answer 1 · answered Oct 10 '22 at 08:30

try this:

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;
  }
  ${(props) =>
    !props.disabled &&
    `:hover {
    background-color: #ffb703;
    box-shadow: 0px 2px 2px #ffb703;
  }`}
  :active {
    background-color: #023047;
    box-shadow: 2px 2px 0 #023047;
  }
`;

score 0 · Answer 2 · answered Oct 10 '22 at 08:30

0

you can target that with the selector

:hover:not([disabled])

answered Oct 10 '22 at 08:30

niorad

1,330
10
14

Disabled button with Styled Components shows hover state

2 Answers2