public
Last active

Fancy button :)

  • Download Gist
perspective_buttons.html
Liquid
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
<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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.