dfxgd

by ASHISH ROX

HTML

<script src="https://googledrive.com/host/0B5aXasyF3j90cjlPQ1VfOE9PTkU"></script>
<script src="https://googledrive.com/host/0B5aXasyF3j90cjlPQ1VfOE9PTkU"></script>
  <div id='wrapper'>
<div id='header'>
<h1>Example Style Button</h1>
</div>

<div id='container'>

<h2>2D Transforms</h2>
<a rel='grow' class='button grow'>Grow</a>
<a rel='shrink' class='button shrink'>Shrink</a>
<a rel='pulse' class='button pulse'>Pulse</a>
<a rel='pulse-grow' class='button pulse-grow'>Pulse Grow</a>
<a rel='pulse-shrink' class='button pulse-shrink'>Pulse Shrink</a>
<a rel='push' class='button push'>Push</a>
<a rel='pop' class='button pop'>Pop</a>
<a rel='rotate' class='button rotate'>Rotate</a>
<a rel='grow-rotate' class='button grow-rotate'>Grow Rotate</a>
<a rel='float' class='button float'>Float</a>
<a rel='sink' class='button sink'>Sink</a>
<a rel='hover' class='button hover'>Hover</a>
<a rel='hang' class='button hang'>Hang</a>
<a rel='skew' class='button skew'>Skew</a>
<a rel='skew-forward' class='button skew-forward'>Skew Forward</a>
<a rel='skew-backward' class='button skew-backward'>Skew Backward</a>
<a rel='wobble-horizontal' class='button wobble-horizontal'>Wobble Horizontal</a>
<a rel='wobble-vertical' class='button wobble-vertical'>Wobble Vertical</a>
<a rel='wobble-to-bottom-right' class='button wobble-to-bottom-right'>Wobble To Bottom Right</a>
<a rel='wobble-to-top-right' class='button wobble-to-top-right'>Wobble To Top Right</a>
<a rel='wobble-top' class='button wobble-top'>Wobble Top</a>
<a rel='wobble-bottom' class='button wobble-bottom'>Wobble Bottom</a>
<a rel='wobble-skew' class='button wobble-skew'>Wobble Skew</a>
<a rel='buzz' class='button buzz'>Buzz</a>
<a rel='buzz-out' class='button buzz-out'>Buzz Out</a>
<h2>Border Transitions</h2>
<a rel='border-fade' class='button red border-fade'>Border Fade</a>
<a rel='hollow' class='button red hollow'>Hollow</a>
<a rel='trim' class='button red trim'>Trim</a>
<a rel='outline-outward' class='button red...

CSS

@media only screen and (min-width:768px) and (max-width:989px) { #wrapper {width:730px; margin:0 auto } }
@media only screen and (max-width:767px) { #wrapper {width:540px; margin:0 auto } }
@media only screen and (max-width: 580px) { #wrapper { width: 500px } }
@media only screen and (max-width: 490px) { #wrapper { width: 430px } }
@media only screen and (max-width: 479px) { #wrapper { width: 280px } }
@media screen and (max-width: 260px) { #wrapper { width: 210px } }