Instantly share code, notes, and snippets.
Created
February 17, 2014 07:02
-
Save martinpolley/9046005 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html class="no-js" lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Button Animation</title> | |
<link rel="stylesheet" href="css/foundation.css" /> | |
<link rel="stylesheet" href="css/app.css" /> | |
<script src="js/modernizr.js"></script> | |
<style> | |
body { | |
color: #FFFFFF; | |
} | |
.button2 { | |
display: inline-block; | |
background-color: rgba(255, 255, 255, 0); | |
border: 1px solid #DDDDDD !important; | |
color: #DDDDDD !important; | |
padding: 17px 32px 16px 32px !important; | |
margin-bottom: 20px; | |
transition: color 350ms ease-out 0s, border-color 350ms ease-out 0s; | |
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
} | |
.button2:focus { | |
color: #999999; | |
border-color: #999999; | |
} | |
.button2:hover { | |
color: #FFFFFF !important; | |
border-color: #FFFFFF !important; | |
transition: color 50ms ease-out 0s, border-color 50ms ease-out 0s; | |
} | |
.button2:visited { | |
//color: #FFFFFF; | |
} | |
.button2.disabled { | |
opacity: 0.6; | |
background-color: rgba(255, 255, 255, 0.1); | |
} | |
.button2.disabled:hover { | |
opacity: 0.6; | |
color: #DDDDDD !important; | |
border-color: #DDDDDD !important; | |
} | |
.button2.dark { | |
background-color: rgba(34, 34, 34, 0); | |
border-color: #555555 !important; | |
color: #555555 !important; | |
} | |
.button2.dark:focus { | |
color: #000000; | |
border-color: #000000; | |
} | |
.button2.dark:hover { | |
color: #000000 !important; | |
border-color: #000000 !important; | |
} | |
.button2.dark.disabled { | |
opacity: 0.6; | |
background-color: rgba(0, 0, 0, 0.1); | |
} | |
.button2.dark.disabled:hover { | |
opacity: 0.6; | |
color: #555555 !important; | |
border-color: #555555 !important; | |
} | |
</style> | |
</head> | |
<body style="background-color: #690101;"> | |
<form> | |
<div class="row" style="margin-top: 2rem;"> | |
<div class="large-2 large-offset-3 columns"> | |
<p>.button2</p> | |
<a href="#" class="button2">Button</a> | |
<p> <br/>.button2.disabled</p> | |
<a href="#" class="button2 disabled">Button</a> | |
</div> | |
<div class="large-2 columns" style="background-color: #f7eab5;"> | |
<p style="color: #222222;">.button2.dark</p> | |
<a href="#" class="button2 dark">Button</a> | |
<p style="color: #222222;">.button2.dark .disabled</p> | |
<a href="#" class="button2 dark disabled">Button</a> | |
</div> | |
<div class="large-2 columns end"> | |
<p>Foundation .button</p> | |
<a href="#" class="button submit">Button</a> | |
<p>Foundation .button .disabled</p> | |
<a href="#" class="button submit disabled">Button</a> | |
</div> | |
</div> | |
</form> | |
<script src="js/jquery.js"></script> | |
<script src="js/foundation.min.js"></script> | |
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> | |
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> | |
<script> | |
$(document).foundation(); | |
</script> | |
<script> | |
$(document).ready(function(){ | |
/*$('div.button2').on('click', function(){ | |
$(this).animate({ opacity: 1 }, 0, 'linear').animate({ opacity: 0.2 }, 500, 'linear'); | |
});*/ | |
$('.button2').on('mousedown', function(){ | |
fadeUp(this); | |
}); | |
$('.button2').on('touchstart', function(){ | |
fadeUp(this); | |
}); | |
$('.button2').on('mouseup', function(){ | |
fadeDown(this); | |
}); | |
$('.button2').on('touchend', function(){ | |
fadeDown(this); | |
}); | |
$('.button2').on('mouseout', function(){ | |
fadeDown(this); | |
}); | |
}); | |
function fadeUp(object){ | |
if (!$(object).hasClass('disabled')) | |
{ | |
if ($(object).hasClass('dark')) | |
{ | |
$(object).css('background-color', 'rgba(0, 0, 0, 0.5)'); | |
} | |
else | |
{ | |
$(object).css('background-color', 'rgba(255, 255, 255, 0.7)'); | |
} | |
} | |
}; | |
function fadeDown(object){ | |
if (!$(object).hasClass('disabled')) | |
{ | |
if ($(object).hasClass('dark')) | |
{ | |
$(object).animate({ backgroundColor: 'rgba(0, 0, 0, 0)' }, 350, 'easeOutQuad'); | |
} | |
else | |
{ | |
$(object).animate({ backgroundColor: 'rgba(255, 255, 255, 0)' }, 350, 'easeOutQuad'); | |
} | |
} | |
}; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment