Updated button style (to give it some depth).

karledurante · Oct 19, 2012 · 54da478 · 54da478
1 parent 0bef0a1
commit 54da478
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/app/assets/stylesheets/_colors.scss b/app/assets/stylesheets/_colors.scss
@@ -19,6 +19,12 @@ $black:       #000;
 $white:       #fff;
 $hover_creme: adjust_color($creme, $hue: -2, $saturation: 5%, $lightness: -12%);
 
+/* button colors */
+$button_color: $blue;
+$button_hover_color: adjust_color($button_color, $hue: -2, $saturation: 5%, $lightness: -12%);
+$button_top: #4EC5F2;
+$button_bottom: #0B7198;
+
 /* Element Color Mappings */
 
 $text-color:          $brown;

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -93,4 +93,5 @@ p {
 
 .content {
   margin-right: auto; margin-left: auto; width: 980px;
+  padding-left: 15px;
 }
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
@@ -70,14 +70,16 @@
 
 .buy {
   border-radius: 4px;
-  background-color: $blue;
+  background-color: $button_color;
+  box-shadow: inset 0 3px 0 -1px $button_top, inset 0 -2px 0 0 $button_bottom;
   padding: 25px;
   margin: 10px;
   color: white;
   text-align: center;
 
   &:hover {
-    color: $dark_red;
+    background-color: $button_hover_color;
+    box-shadow: inset 0 3px 0 -1px $button_color, inset 0 -2px 0 0 $button_bottom;
     cursor: pointer;
   }
 
@@ -87,7 +89,6 @@
     text-shadow: $grey 0.1em;
 
     &:hover {
-      color: $grey;
       cursor: pointer;
     }
   }