<💅> primary, secondary, :hover

index.js

import styled, { css } from 'styled-components';

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  color: palevioletred;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}

  ${props => props.seconday && css`
    background: rebeccapurple;
    color: white;
  `}
  
  &:hover {
    border-color: hotpink;
    ${props => props.primary && css`
      background: hotpink;
    `}
  }
`;