Fancy button :)

perspective_buttons.html

<style>
  body{
    background-color: #ddd;
    text-align: center;
    margin: 100px;
  }

  a{
    display: block;
    width: 50%;
    border: 3px solid #666;
    -webkit-border-radius: 18px;
    background-color: #000;
    margin: 150% auto;

    color: #eee;
    text-decoration: none;
    font-family: sans-serif;
  }

  a span{
    -webkit-border-radius: 15px;
    background: #444;
    display: block;
    padding: 15px 0;
    position: relative;
    top: 10px;
  }

  a:active span{
    top: 0px;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<a href="#"><span>Button one!</span></a>
<a href="#"><span>Button two!</span></a>
<a href="#"><span>Button three!</span></a>
<a href="#"><span>Button four!</span></a>
<a href="#"><span>Button five!</span></a>

<script>

  $(document).scroll(function(){

    $('a').each(function(){

      o = (($(window).scrollTop() + ($(window).height() / 2)) - $(this).offset().top) / ($(window).height() / 30)

      if (o < 10 && o > -10) {
        $(this).find('span').css('top', -o + 'px')
      }

    })

  })

</script>