マイクロインタラクション（ログインボタンだけ、、、 #JavaScript #JQuery #CSS

マイクロインタラクション（ログインボタンだけですが、、、）を注目度Upの為に勉強しました。
<!doctype html>

<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Micro Interaction - Main -</title>
	<meta name="description" content="Micro Interaction Main Screen.">
	<meta name="author" content="Koga">
	<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
	<style type="text/css">
	<!--
		button {
			background-color:white;
			width: 120px;
			height: 40px;
			border: 3px green solid;
			border-radius: 20px;
			color: green;
			font-weight: bold;
		}
	//-->
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><!-- JQuery -->
	<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script><!-- JQuery Color -->
	<script type="text/javascript">
	<!--
		$.fn.extend({
			animateCss: function (animationName, animationEndFunc) {
				var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
				this.addClass('animated ' + animationName).one(animationEnd, function() {
					$(this).removeClass('animated ' + animationName);
					if(animationEndFunc) {
						animationEndFunc.apply(this, []);
					}
				});
			}
		});
		$(function() {
			$("#btn").mouseenter(function(){
					$(this).animate({backgroundColor:"green", color:"white"}, 100, "linear", function(){
						$(this).animateCss('pulse');
					});
				}).mouseleave(function(){
					$(this).animate({backgroundColor:"white", color:"green"}, 100, "linear");
					
				}).click(function(){
					$(this).animateCss('bounceIn', function() {
						var circleSize = "40px";
						$("span",this).hide();
						$(this).animate({
							width: circleSize,
							height: circleSize,
							borderRadius: "50%",// 50%でも40pxでも良い
							backgroundColor:"white",
							color:"green"}, 200, "swing", function(){
								// 0.75秒後に元に戻す。
								setTimeout(function(_this) {
										$(_this).animate({backgroundColor:"green", color:"white", width:"120px", height:"40px", borderRadius:"20px"}, 200, "swing");
										$("span", _this).html("OK").show();
									}, 750, this);
								
							});
					});
					
				});
		});
	//-->
	</script>
</head>
<body>
	<div style="padding:10px;width:500px;height:100px;background-color:gray;position:relative;">
		<button id="btn" style="margin: auto;top: 0; bottom: 0; left: 0; right: 0; position: absolute;"><span>Log In</span></button>
	</div>
</body>
</html>