Snips

Reusable Code Snippets

React Component | Button

Edit on Github
export default ({ children, ...props }) => {
  return (
    <>
      <button {...props}>{children}</button>
      <style jsx>{`
        button {
          background: #000;
          color: #fff;
          border: 2px solid rgba(12, 12, 13, 0.1);
          border-radius: 4px;
          height: 32px;
          padding: 0 16px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          transition: all 0.2s ease;
        }

        button:hover {
          border-color: #000;
          outline: #000;
          color: #000;
          background: #fff;
        }
      `}</style>
    </>
  );
};