JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://tympanus.net/Development/IconHoverEffects/js/modernizr.custom.js"></script>
<script src="https://rawgithub.com/srobbin/jquery-approach/master/jquery.approach.min.js"></script>
<div id="test" class="test">EXPLORE</div>

<div id="test2" class="test">EXPLORE</div>

<div id="test3" class="test">EXPLORE</div>

<div id="test5" class="test">EXPLORE</div>

CSS

.test {
    margin-bottom: 20px;
}

#test {
    position: relative;
    width: 298px;
    height: 52px; line-height: 52px;
    border: 4px solid black;
    text-align: center;
    transition:all .1s linear; 
    -o-transition:all .1s linear; 
    -moz-transition:all .1s linear; 
    -webkit-transition:all .1s linear;
    cursor: pointer;
}

#test:hover {
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1.0);
}



#test2 {
    position: relative;
    width: 298px;
    height: 52px; line-height: 52px;
    border: 4px solid black;
    text-align: center;
    transition:all .3s linear; 
    -o-transition:all .3s linear; 
    -moz-transition:all .3s linear; 
    -webkit-transition:all .3s linear;
    cursor: pointer;
}

#test2:hover {
    border: 4px solid #999;
}



#test3 {
    position: relative;
    width: 298px;
    height: 52px; line-height: 52px;
    border: 4px solid black;
    text-align: center;
    transition:all .1s linear; 
    -o-transition:all .1s linear; 
    -moz-transition:all .1s linear; 
    -webkit-transition:all .1s linear;
    cursor: pointer;
}

#test3:hover {
    background-color: black;
    color: white;
	border: 4px solid black;
}


#test5 {
    position: relative;
    margin-top: 40px;
    width: 298px;
    height: 52px; line-height: 52px;
    border: 4px solid black;
    text-align: center;
    cursor: pointer;
}

JavaScript

jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}}});

$('#test5').hover(function() {
 $(this).stop().animate({"top" : "-5px"});
}, function(){
 $(this).stop().animate({"top": "0"});
});