Button.tsx

const Button = styled<IStyle, 'button'>('button')`
  display: inline-block;
  font-weight: bold;
  font-weight: ${getFontWeightFromSize};
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  vertical-align: middle;
  padding: ${props => (props.icon ? '0.5em' : '0.5em 1em')};
  line-height: ${props => (props.icon ? '0' : '1')};
  background: ${props => (props.outline ? 'transparent' : getColor('main'))};
  border-radius: ${getBorderRadius};
  font-size: ${getFontSize};
  border-width: ${getBorderWidth};
  border-style: solid;
  border-color: ${getColor('main')};
  color: #fff;
  &:hover,
  &:focus {
    transform: translateY(-1px);
    background: ${props =>
      props.outline ? 'rgba(255,255,255,0.12)' : getColor('lighter')};
    box-shadow: ${props =>
      props.color === 'link' ? 'none' : '0 1px 0 0 rgba(0, 0, 0, 0.4)'};
  }
  &:focus {
    outline: 2px dotted rgba(255, 255, 255, 0.4);
  }
  &:active {
    transform: translateY(0);
  }
`;