Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Fancy button :)
background-color: #ddd;
text-align: center;
margin: 100px;
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;
<script src="" 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>
o = (($(window).scrollTop() + ($(window).height() / 2)) - $(this).offset().top) / ($(window).height() / 30)
if (o < 10 && o > -10) {
$(this).find('span').css('top', -o + 'px')
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.