title: Using box shadow to make bevel effect
body: <p>I have this css code, on which there is a  tag. I styled it to bevel when I hover over it.</p>
  
  <p>This is the css:</p>
  
  <pre><code>#slider-next {    
      padding:10px 60px;
      -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
  border-radius: 25px;
      background: -moz-linear-gradient(top, #28c4e3 0%, #0d5664 100%); /* firefox */
  
      text-shadow: 0 1px 2px #fff;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28c4e3), color-stop(100%,#0d5664)); /* webkit */font-size:20px}
  
  #slider-next:hover {
      box-shadow:         0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
      -moz-box-shadow:    0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
      -webkit-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
       border: solid #ccc 3px;
  }
  </code></pre>
  
  <p>And this is the html:</p>
  
  <pre><code>&lt;span id="slider-next" style="float:right"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>What I want to do is when I hover over the span text, it bevels up, to give a button like effect. Right now it is beveling downwards.</p>
  
  <p>How do I make it bend up? <a href="http://jsfiddle.net/g7YMV/" rel="nofollow">Here's a fiddle of it.</a></p>