404 button tweak

src/components/atoms/Button.module.scss

@@ -12,6 +12,12 @@
     border: .05rem solid rgba($brand-cyan, .75);
     font-size: $font-size-small;
     text-transform: uppercase;
+    cursor: pointer;
+
+    @media (min-width: 30rem) {
+        display: inline-block;
+        width: auto;
+    }
 
     svg {
         fill: $brand-grey-light;

src/components/molecules/ProjectLinks.module.scss

@@ -16,6 +16,11 @@
         margin-left: $spacer / 2;
         margin-bottom: $spacer / 2;
     }
+
+    a {
+        display: block;
+        width: 100%;
+    }
 }
 
 .title {

src/pages/404.jsx

@@ -4,6 +4,7 @@ import { Link } from 'gatsby'
 import giphyAPI from 'giphy-js-sdk-core'
 import Layout from '../components/Layout'
 import Content from '../components/atoms/Content'
+import Button from '../components/atoms/Button'
 import './404.scss'
 
 // Famous last words:
@@ -48,15 +49,15 @@ class NotFound extends Component {
           <p>
             You might want to check the url, or{' '}
             <Link to={'/'}>go back to the homepage</Link>. Or just check out
-            some fail gifs, entirely your choice.
+            some cat fail gifs, entirely your choice.
           </p>
 
           <video className="gif" src={this.state.gif} autoPlay loop />
 
           <div>
-            <a className="gif__action" href="#" onClick={this.handleClick}>
+            <Button onClick={this.handleClick}>
               Show me another cat fail gif
-            </a>
+            </Button>
           </div>
         </Content>
       </Layout>

src/pages/404.scss

@@ -3,6 +3,9 @@
 .content--404 {
     text-align: center;
     height: 100%;
+    max-width: 35rem;
+    margin-left: auto;
+    margin-right: auto;
 
     .gif {
         display: inline-block;
@@ -13,11 +16,4 @@
         margin-top: $spacer / 4;
         margin-bottom: $spacer / 2;
     }
-
-    .gif__action {
-        font-size: $font-size-small;
-        padding: $spacer / 6 $spacer / 2;
-        border: 1px solid $brand-cyan;
-        border-radius: 4px;
-    }
 }