add docs button

docs-assets/css/docs.css

@@ -667,10 +667,35 @@ body {
   padding-bottom: 50px;
 }
 .docs-header-content .button {
+  padding: 15px 30px;
+  font-size: 18px;
+  color: #00d1fe;
+  border-color: #00d1fe;
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+}
+.docs-header-content .button:hover {
+  color: #63e3ff;
+  border-color: #63e3ff;
+}
+.docs-header-content .button:active {
+  opacity: .5;
+  background-color: transparent;
+}
+.docs-header-content .button-primary {
+  margin-left: 10px;
   color: #fff;
   border-color: #00d1fe;
   background-color: #00d1fe;
 }
+.docs-header-content .button-primary:hover {
+  color: #fff;
+  border-color: #63e3ff;
+  background-color: #63e3ff;
+}
+.docs-header-content .button-primary:active {
+  background-color: #63e3ff;
+}
 
 .docs-title,
 .docs-subtitle {
@@ -943,11 +968,6 @@ hr {
     padding-top: 100px;
     padding-bottom: 130px;
   }
-  .docs-header-content .button {
-    max-width: 300px;
-    margin-right: auto;
-    margin-left: auto;
-  }
 
   .docs-subtitle {
     margin-bottom: 30px;

index.html

@@ -16,7 +16,8 @@ base_url: "./"
 
   <div class="docs-header-content">
     <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>  
-    <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
+    <a data-ignore="push" href="/components" class="button button-outlined">View the docs</a>
+    <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
   </div>
 </div>
 

lib/sass/docs.scss

@@ -59,9 +59,35 @@ body {
   padding-bottom: 50px;
 
   .button {
+    padding: 15px 30px;
+    font-size: 18px;
+    color: #00d1fe;
+    border-color: #00d1fe;
+    @include transition(all .2s linear);
+
+    &:hover {
+      color: #63e3ff;
+      border-color: #63e3ff;
+    }
+    &:active {
+      opacity: .5;
+      background-color: transparent;
+    }
+  }
+  .button-primary {
+    margin-left: 10px;
     color: #fff;
     border-color: #00d1fe;
     background-color: #00d1fe;
+
+    &:hover {
+      color: #fff;
+      border-color: #63e3ff;
+      background-color: #63e3ff;
+    }
+    &:active {
+      background-color: #63e3ff;
+    }
   }
 }
 .docs-title,
@@ -353,12 +379,6 @@ hr {
   .docs-header-content {
     padding-top: 100px;
     padding-bottom: 130px;
-    
-    .button {
-      max-width: 300px;
-      margin-right: auto;
-      margin-left: auto;
-    }
   }
   .docs-subtitle {
     margin-bottom: 30px;