bushido-strap/styled/base/strings/buttonStyle.js

a library of styled components with material theme

import { css } from "styled-components";
import {
  buttonColor,
  buttonBackground,
  buttonHoverColor,
  buttonHoverBackground,
  buttonCursorStyle,
  boxShadow,
  activeBackground,
} from "../../maps";

export default css`
  color: ${(props) => (props.color ? props.color : buttonColor)};
  background: ${(props) => (props.bg ? props.bg : buttonBackground)};
  border: ${(props) => (props.border ? props.border : "none")};
  border-radius: ${(props) => (props.radius ? props.radius : "0.1rem")};
  opacity: ${(props) => (props.opacity ? props.opacity : "none")};
  box-shadow: ${(props) => (props.shadow ? props.shadow : boxShadow)};

  &:hover {
    border: ${(props) => (props.hvrBorder ? props.hvrBorder : "none")};
    color: ${(props) => (props.hvrColor ? props.hvrColor : buttonHoverColor)};
    background: ${(props) =>
      props.hvrBg ? props.hvrBg : buttonHoverBackground};
    cursor: ${buttonCursorStyle};
  }

  &:active {
    background: ${(props) =>
      props.activeBg ? props.activeBg : activeBackground};
  }
`;