<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.