Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fancy button :)
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.