Lighten Current Button Color on Hover Using Styled-System (and styled-compoments)

Question

I am creating a Button component using styled-system (with styled-components).

I want to create a hover effect that slightly lightens the color of the button, regardless of what that color is.

For instance, let's imagine three buttons -- a default button, primary button and secondary button:

<Button>Default</Button>
<Button bg="primary">Primary</Button>
<Button bg="secondary">Secondary</Button>

And let's imagine that the default color is dark grey, the primary color is green and the secondary color is blue.

So, if I hover over the default button, the color should be a slightly lighter form of the dark grey. For the primary, a slightly lighter green, for secondary, a lighter blue.

I cannot figure out, though, how to do this?

Any ideas?

Answer 1

The recommended way is to use styled-system's buttonStyle variant.

This requires adding the buttonStyle system prop, then providing a buttons scale on the theme object. Note that variants are raw CSS object defs, not system props.

Button.js

import styled from "styled-components"
import { buttonStyle } from "@styled-system/variant"

export default styled('button')({}, buttonStyle)

theme.js

export default {
  buttons: {
    primary: {
      backgroundColor: "red",
      '&:hover': {
        backgroundColor: "pink" // use polished `lighten`, etc
      }
    }
  }
}

Usage: Just specify the variant.

<Button variant="primary">Primary Button</Button>

Here's the CodeSandbox demo: https://codesandbox.io/s/zealous-noether-lxjeu?fontsize=14

Answer 2

You'll need to use some css classes.

you can use filter: brightness(150%) or custom lighten colors. But if you use a css pre processor like SASS or Less you have pre-built functions.

For example:

button {
  background: red;
  color: white;
}

.primary {
  background: green;
}

.secondary {
  background: blue;
}

button:hover {
  filter: brightness(150%);
}

<Button>Default</Button>
<Button class="primary">Primary</Button>
<Button class="secondary">Secondary</Button>