updated back button to look better

jonmagic · Mar 19, 2010 · 512e050 · 512e050
1 parent afcbcdf
commit 512e050
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -69,7 +69,7 @@ <h3>Home</h3>
         <div class="panel" id="section_one" style="display:none">
           <div class="navbar">
             <h3>Section One</h3>
-            <a href="javascript:void(0);" class="back">Home</a>
+            <a href="javascript:void(0);" class="back ui-state-default ui-corner-all fg-button">Back</a>
           </div>
           <ul>
             <li><a href="javascript:void(0);">Option One</a></li>

diff --git a/javascripts/application.js b/javascripts/application.js
@@ -68,5 +68,14 @@ $(function(){
   section_onePanel.find('a.back').click(function(){
     section_onePanel.hide('slide', { direction: 'right' }, 500);
     homePanel.show('slide', { direction: 'left' }, 500);    
-  })
+  });
+  // button hover
+  $('.fg-button').hover(
+    function(){ 
+      $(this).addClass("ui-state-hover"); 
+    },
+    function(){ 
+      $(this).removeClass("ui-state-hover"); 
+    }
+  )
 });
diff --git a/stylesheets/application.css b/stylesheets/application.css
@@ -197,6 +197,15 @@ caption { background: #eeeeee; }
   background-color: #edefeb;
   background-image: none;
 }
+.fg-button {
+  outline: 0;
+  margin: 0 4px 0 0;
+  padding: 0.4em 1em;
+  text-decoration: none !important;
+  cursor: pointer;
+  text-align: center;
+  zoom: 1;
+}
 div.header {
   background-color: #c6d6b4;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dcddda), color-stop(1, #c6d6b4));
@@ -237,15 +246,7 @@ div.footer {
 #left div.panel div.navbar a.back {
   position: absolute;
   top: 6px;
-  left: 6px;
-  padding: 0.5em 0.5em 0.5em 1em;
-  background-color: #cacdcb;
-  color: #ffffff;
-  text-decoration: none;
-  -moz-border-radius-topleft: 12px;
-  -moz-border-radius-bottomleft: 12px;
-  -webkit-border-top-left-radius: 12px;
-  -webkit-border-bottom-left-radius: 12px;
+  right: 6px;
 }
 #left div.panel ul {
   margin: 0;

diff --git a/stylesheets/application.less b/stylesheets/application.less
@@ -51,6 +51,17 @@
   background-image:none;
 }
 
+/* helpers */
+.fg-button {
+  outline: 0; 
+  margin:0 4px 0 0; 
+  padding: .4em 1em; 
+  text-decoration:none !important; 
+  cursor:pointer;
+  text-align: center; 
+  zoom: 1;
+}
+
 /* main css */
 div.header {
   background-color:@secondaryB_dark;
@@ -95,15 +106,7 @@ div.footer {
       a.back {
         position:absolute;
         top:6px;
-        left:6px;
-        padding:0.5em 0.5em 0.5em 1em;
-        background-color:@primary;
-        color:#fff;
-        text-decoration:none;
-        -moz-border-radius-topleft:12px;
-        -moz-border-radius-bottomleft:12px;
-        -webkit-border-top-left-radius:12px;
-        -webkit-border-bottom-left-radius:12px;
+        right:6px;
       }
     }
     ul {