Slightly nicer, GitHub-inspired buttons.

public/stylesheets/application.css

@@ -67,6 +67,45 @@ body {
   body html > body {
     font-size: 12px; }
 
+.button {
+  padding: 0.5em 1em;
+  border: 1px solid #cccccc;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -o-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -khtml-border-radius: 2px;
+  border-radius: 2px;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #ececec)), #ececec;
+  background: -webkit-linear-gradient(#f4f4f4, #ececec), #ececec;
+  background: -moz-linear-gradient(#f4f4f4, #ececec), #ececec;
+  background: -o-linear-gradient(#f4f4f4, #ececec), #ececec;
+  background: linear-gradient(#f4f4f4, #ececec), #ececec;
+  color: #666666;
+  text-shadow: 1px 1px 0 white;
+  text-decoration: none; }
+  .button:hover, .button:focus {
+    border-color: #999999;
+    border-bottom-color: #666666;
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)), #dddddd;
+    background: -webkit-linear-gradient(#eeeeee, #dddddd), #dddddd;
+    background: -moz-linear-gradient(#eeeeee, #dddddd), #dddddd;
+    background: -o-linear-gradient(#eeeeee, #dddddd), #dddddd;
+    background: linear-gradient(#eeeeee, #dddddd), #dddddd;
+    color: #333333;
+    text-decoration: none; }
+  .button:active, .button.active {
+    border-color: #666666;
+    border-bottom-color: #999999;
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee)), #eeeeee;
+    background: -webkit-linear-gradient(#dddddd, #eeeeee), #eeeeee;
+    background: -moz-linear-gradient(#dddddd, #eeeeee), #eeeeee;
+    background: -o-linear-gradient(#dddddd, #eeeeee), #eeeeee;
+    background: linear-gradient(#dddddd, #eeeeee), #eeeeee;
+    color: #333333;
+    text-decoration: none;
+    text-shadow: -1px -1px 0 #eeeeee; }
+
 body > header {
   overflow: hidden;
   *zoom: 1;
@@ -91,8 +130,7 @@ body > header {
       body > header h1 a:hover {
         color: #4183c4; }
   body > header nav {
-    border-left: 1px solid #cccccc;
+    border-left: 1px solid #cccccc; }
-    border-right: 1px solid white; }
     body > header nav.project {
       float: left; }
     body > header nav.app {
@@ -100,24 +138,44 @@ body > header {
     body > header nav li {
       display: inline; }
       body > header nav li a {
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
         display: inline-block;
+        vertical-align: middle;
+        *vertical-align: auto;
         float: left;
         padding: 9px;
         border-left: 1px solid white;
         border-right: 1px solid #cccccc;
-        background: #eeeeee;
-        color: #666666;
-        font-weight: bold;
         text-decoration: none;
-        text-shadow: 0 1px 0 white; }
+        text-shadow: 0 1px 0 white;
-        body > header nav li a:hover {
+        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #ececec)), #ececec;
-          background: white; }
+        background: -webkit-linear-gradient(#f4f4f4, #ececec), #ececec;
-        body > header nav li a:active {
+        background: -moz-linear-gradient(#f4f4f4, #ececec), #ececec;
-          margin: 1px -1px -1px 1px;
+        background: -o-linear-gradient(#f4f4f4, #ececec), #ececec;
-          -moz-box-shadow: none;
+        background: linear-gradient(#f4f4f4, #ececec), #ececec;
-          -webkit-box-shadow: none;
+        color: #666666;
-          -o-box-shadow: none;
+        text-shadow: 1px 1px 0 white;
-          box-shadow: none; }
+        text-decoration: none; }
+        body > header nav li a {
+          *display: inline; }
+        body > header nav li a:hover, body > header nav li a:focus {
+          background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)), #dddddd;
+          background: -webkit-linear-gradient(#eeeeee, #dddddd), #dddddd;
+          background: -moz-linear-gradient(#eeeeee, #dddddd), #dddddd;
+          background: -o-linear-gradient(#eeeeee, #dddddd), #dddddd;
+          background: linear-gradient(#eeeeee, #dddddd), #dddddd;
+          color: #333333;
+          text-decoration: none; }
+        body > header nav li a:active, body > header nav li a.active {
+          background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee)), #eeeeee;
+          background: -webkit-linear-gradient(#dddddd, #eeeeee), #eeeeee;
+          background: -moz-linear-gradient(#dddddd, #eeeeee), #eeeeee;
+          background: -o-linear-gradient(#dddddd, #eeeeee), #eeeeee;
+          background: linear-gradient(#dddddd, #eeeeee), #eeeeee;
+          color: #333333;
+          text-decoration: none;
+          text-shadow: -1px -1px 0 #eeeeee; }
 
 #messages {
   width: 100%;
@@ -203,18 +261,24 @@ body > header {
               *display: inline; }
     #message > header .views ul {
       padding: 0 0.5em;
-      border-bottom: 1px solid #999999; }
+      border-bottom: 1px solid #cccccc; }
     #message > header .views .tab {
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
       display: inline-block;
+      vertical-align: middle;
+      *vertical-align: auto;
       padding: 0.5em;
-      border: 1px solid #999999;
+      border: 1px solid #cccccc;
       background: #dddddd;
       color: #333333;
       border-width: 1px 1px 0 1px;
       cursor: pointer;
       text-shadow: 0 1px 0 #eeeeee; }
+      #message > header .views .tab {
+        *display: inline; }
     #message > header .views .tab:not(.selected):hover {
-      background-color: #dddddd; }
+      background-color: #eeeeee; }
     #message > header .views .tab.selected {
       background: white;
       color: black;
@@ -223,32 +287,18 @@ body > header {
       -webkit-box-shadow: 1px 1px 0 #cccccc;
       -o-box-shadow: 1px 1px 0 #cccccc;
       box-shadow: 1px 1px 0 #cccccc;
-      margin-bottom: -2px; }
+      margin-bottom: -2px;
-    #message > header .views .button {
+      cursor: default; }
+    #message > header .views .action {
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
       display: inline-block;
+      vertical-align: middle;
+      *vertical-align: auto;
       float: right;
       margin: 0 0.25em; }
-      #message > header .views .button a {
+      #message > header .views .action {
-        display: inline-block;
+        *display: inline; }
-        padding: 0.25em 0.5em;
-        border: 1px solid #999999;
-        background: #dddddd;
-        color: #333333;
-        text-decoration: none;
-        text-shadow: 1px 1px 0 #eeeeee;
-        -moz-box-shadow: 1px 1px 0 #cccccc;
-        -webkit-box-shadow: 1px 1px 0 #cccccc;
-        -o-box-shadow: 1px 1px 0 #cccccc;
-        box-shadow: 1px 1px 0 #cccccc; }
-        #message > header .views .button a:hover {
-          background: white;
-          text-shadow: none; }
-        #message > header .views .button a:active {
-          margin: 1px -1px -1px 1px;
-          -moz-box-shadow: none;
-          -webkit-box-shadow: none;
-          -o-box-shadow: none;
-          box-shadow: none; }
   #message .body {
     display: -moz-box;
     display: -webkit-box;

public/stylesheets/application.sass

@@ -14,6 +14,28 @@ body
   font-size: 12px
   font-family: Helvetica, sans-serif
 
+.button
+  padding: .5em 1em
+  border: 1px solid #ccc
+  +border-radius(2px)
+  +background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
+  color: #666
+  +text-shadow(1px 1px 0 #fff)
+  text-decoration: none
+  &:hover, &:focus
+    border-color: #999
+    border-bottom-color: #666
+    +background(linear-gradient(color-stops(#eee, #ddd)), #ddd)
+    color: #333
+    text-decoration: none
+  &:active, &.active
+    border-color: #666
+    border-bottom-color: #999
+    +background(linear-gradient(color-stops(#ddd, #eee)), #eee)
+    color: #333
+    text-decoration: none
+    +text-shadow(-1px -1px 0 #eee)
+
 body > header
   +clearfix
   border-bottom: 1px solid #ccc
@@ -35,26 +57,29 @@ body > header
     &.app
       float: right
     border-left: 1px solid #ccc
-    border-right: 1px solid #fff
     li
       display: inline
-      // @include inline-block;
       a
-        display: inline-block
+        +inline-block
         float: left
         padding: 9px
         border-left: 1px solid #fff
         border-right: 1px solid #ccc
-        background: #eee
-        color: #666
-        font-weight: bold
         text-decoration: none
         +text-shadow(0 1px 0 white)
-        &:hover
+        +background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
-          background: #fff
+        color: #666
-        &:active
+        +text-shadow(1px 1px 0 #fff)
-          margin: 1px -1px -1px 1px
+        text-decoration: none
-          +box-shadow(none)
+        &:hover, &:focus
+          +background(linear-gradient(color-stops(#eee, #ddd)), #ddd)
+          color: #333
+          text-decoration: none
+        &:active, &.active
+          +background(linear-gradient(color-stops(#ddd, #eee)), #eee)
+          color: #333
+          text-decoration: none
+          +text-shadow(-1px -1px 0 #eee)
 
 #messages
   width: 100%
@@ -120,43 +145,29 @@ body > header
     .views
       ul
         padding: 0 .5em
-        border-bottom: 1px solid #999
+        border-bottom: 1px solid #ccc
       .tab
-        display: inline-block
+        +inline-block
         padding: .5em
-        border: 1px solid #999
+        border: 1px solid #ccc
         background: #ddd
         color: #333
         border-width: 1px 1px 0 1px
         cursor: pointer
         +text-shadow(0 1px 0 #eeeeee)
       .tab:not(.selected):hover
-        background-color: #ddd
+        background-color: #eee
       .tab.selected
         background: #fff
         color: #000
         height: 13px
-        +box-shadow(1px 1px 0 #cccccc)
+        +box-shadow(1px 1px 0 #ccc)
         margin-bottom: -2px
-      .button
+        cursor: default
-        display: inline-block
+      .action
+        +inline-block
         float: right
         margin: 0 .25em
-        a
-          display: inline-block
-          padding: .25em .5em
-          border: 1px solid #999
-          background: #ddd
-          color: #333
-          text-decoration: none
-          +text-shadow(1px 1px 0 #eeeeee)
-          +box-shadow(1px 1px 0 #cccccc)
-          &:hover
-            background: #fff
-            +text-shadow(none)
-          &:active
-            margin: 1px -1px -1px 1px
-            +box-shadow(none)
   .body
     +display-box
     +box-flex(1)

views/index.haml

@@ -45,7 +45,7 @@
             %li.format.tab.html.selected{'data-message-format' => 'html'} HTML
             %li.format.tab.plain{'data-message-format' => 'plain'} Plain Text
             %li.format.tab.source{'data-message-format' => 'source'} Source
-            %li.button.download
+            %li.action.download
-              %a{:href => '#'}
+              %a.button{:href => '#'}
                 %span Download
       %iframe.body