Move button to its own component

fix css linting errors

src/components/Button/Button.css

@@ -0,0 +1,27 @@
+@import '../variables.css';
+
+.root {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 10px 16px;
+  width: 100%;
+  opacity: 0.75;
+  outline: 0;
+  border: 4px solid #fff;
+  border-radius: 14px;
+  background: var(--colour-nearblack);
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  font-size: 18px;
+  line-height: 1.3333333;
+  cursor: pointer;
+  transition: opacity ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
+}
+
+.root:hover,
+.root:focus {
+  opacity: 0.9;
+  box-shadow: 0 0 4px #fff;
+}

src/components/Button/Button.js

@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Button.css';
+
+class Button extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+  };
+
+  handleClick = (event) => {
+    if (this.props.onClick) {
+      this.props.onClick(event);
+    }
+  };
+
+  render() {
+    const { children, ...props } = this.props;
+    return <button className={s.root} {...props} onClick={this.handleClick}>{children}</button>;
+  }
+}
+
+export default withStyles(s)(Button);

src/components/Button/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Button",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Button.js"
+}