styled.components.js

import React from 'react';
import styled from 'styled-componets';

const Button = styled.button`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  color: palevioletred;
  border: 2px solid palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  transition: 0.5s all ease-out;
  &:hover {
    background-color: palevioletred;
    color: white;
  }
`
const App = () => {
  return (
    <div>
      <h1> Stlyed Button </h1>
      <Button>Custom button</Button>
    </div>
  )
}