Changed download button from image to CSS

Raku · Apr 3, 2015 · 6e8c242 · 6e8c242
1 parent 7da7a96
commit 6e8c242
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/source/download-button.png b/source/download-button.png
diff --git a/source/index.html b/source/index.html
@@ -30,7 +30,7 @@ <h4><a href="/community/">Community</a></h4>
 
     <section id="download">
         <a href="http://rakudo.org/how-to-get-rakudo">
-        <img src="download-button.png" alt="download"/>
+            Download Rakudo Perl&nbsp;6
         </a>
     </section>
 

diff --git a/source/style.css b/source/style.css
@@ -137,25 +137,40 @@ section ul {
     background: #f5ef7b;
     border-color: #f2c100;
 }
-#download {
-    border: 2px solid white;
-    -moz-box-shadow: 5px 5px 10px white;
-    -webkit-box-shadow: 5px 5px 10px white;
-    box-shadow: 5px 5px 10px white;
-}
 
 #nav-home {
     background: #80b5ff;
 }
 
+#download {
+    border: 0;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
 #download a {
+    background: #2065F7;
+    background: -webkit-linear-gradient(top, #9CBAFB 0, #5B8EF9 4.5%, #2065F7 100%);
+    background: linear-gradient(to bottom, #9CBAFB 0, #5B8EF9 4.5%, #2065F7 100%);
+    border: 1px solid #2168FF;
+    border-radius: 1em;
+    color: #fff;
+    text-shadow: 1px 1px 3px #666;
+    box-shadow: 5px 5px 10px #888;
+    display: inline-block;
+    font-size: 130%;
+    text-align: center;
+    margin: 2.4em 0 0;
+    padding: 0.5em 1.5em 0.5em;
+}
+
+#download a:hover {
+    background-color: #5B8EF9;
+    background: -webkit-linear-gradient(top, #9CBAFB 0, #5B8EF9 6%, #5B8EF9 100%);
+    background: linear-gradient(to bottom, #9CBAFB 0, #5B8EF9 6%, #5B8EF9 100%);
+    color: #fff;
     text-decoration: none;
-    border: 0px;
-    font-size: 100%;
-    color: #ffffff;
-    margin: 2em auto;
-    display: block;
-    width: 206px;
 }
 
 ul {