diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
index 245497d..f035f1f 100644
--- a/docs/_layouts/home.html
+++ b/docs/_layouts/home.html
@@ -23,12 +23,6 @@
   a {
     background-color: white;
     color: #06e8a4;
-    padding: 10px;
-    text-decoration: none;
-    border-radius: 2px;
-
-    margin: 10px;
-    transition: background-color .25s;
   }
 
   a:hover {
@@ -40,10 +34,10 @@
   <h1>Abacus</h1>
   <h2>The programmer's calculator</h2>
   <div id="buttons">
-    <a href="https://github.com/DanilaFe/abacus/releases">Download</a>
-    <a href="{{ "/about" | relative_url }}">Learn More</a>
-    <a href="https://github.com/DanilaFe/abacus">Contribute</a>
-    <a href="https://github.com/DanilaFe/abacus/wiki">Wiki</a>
+    <a class="button inverted" href="https://github.com/DanilaFe/abacus/releases">Download</a>
+    <a class="button inverted" href="{{ "/about" | relative_url }}">Learn More</a>
+    <a class="button inverted" href="https://github.com/DanilaFe/abacus">Contribute</a>
+    <a class="button inverted" href="https://github.com/DanilaFe/abacus/wiki">Wiki</a>
   </div>
   <img src="http://i.imgur.com/Min70QY.png" title="source: imgur.com" />
   </body>
diff --git a/docs/assets/css/main.scss b/docs/assets/css/main.scss
index cd35363..1750cec 100644
--- a/docs/assets/css/main.scss
+++ b/docs/assets/css/main.scss
@@ -2,15 +2,46 @@
 ---
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans|Raleway');
 
-$background-color: #06e8a4;
+$background-color: #19d69e;
 $code-color: #efefef;
 $accent-color: #00AFE8;
 $clear-color: white;
 $title-font: "Open Sans";
-$text-font: Raleway;
+$text-font: Helvetica;
 $code-font: "Source Code Pro";
 $max-width: 850px;
 
+a {
+  text-decoration: none;
+  color: $background-color;
+
+  &.button {
+    background-color: $background-color;
+    color: $clear-color;
+    padding: 10px;
+    text-decoration: none;
+    border-radius: 2px;
+
+    margin: 10px;
+    transition: background-color .25s;
+
+    &:hover {
+      background-color: $clear-color;
+      color: $background-color;
+    }
+
+    &.inverted {
+      background-color: $clear-color;
+      color: $background-color;
+
+      &:hover {
+        background-color: $background-color;
+        color: $clear-color;
+      }
+    }
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   font: {
     family: $title-font;