<div id="root"></div>

import * as React from 'https://cdn.skypack.dev/[email protected]^16.13.1';
import * as ReactDOM from 'https://cdn.skypack.dev/[email protected]^16.13.1';
import styled from 'https://cdn.skypack.dev/styled-components';

const Button = styled.button`
  background-color: purple;
  border: 1px solid purple;
  border-radius: 4px;
  color: white;
  padding: 10px 20px;

  &:hover {
    background-color: white;
    border: 1px solid purple;
    color: purple;
    cursor: pointer;
  }
`

const Container = styled.div`
  display: flex;
  justify-content: space-evenly;
  margin: 10px auto;
  width: 30%;
`

const App = () => (
    <Container>
      <Button>I am a Button!</Button>
      <Button as="a" href="#">I am a Link!</Button>
    </Container>
  );

ReactDOM.render(<App />,
document.getElementById("root"))