<div id="root"></div>
import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { styled, setup } from "https://cdn.skypack.dev/goober";

setup(React.createElement);

const BRAND_COLOR = "#F06D06";

const Button = styled("button")`
  color: ${(props) => (props.primary ? BRAND_COLOR : "white")};
  background: ${(props) => (props.primary ? "white" : BRAND_COLOR)};
  border: 2px solid ${BRAND_COLOR};
  margin: 0.5em 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  &:hover {
    color: black;
  }
`;

function App() {
  return (
    <div>
      <Button>Button</Button>
      <Button primary>Button</Button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.