Pure CSS3 Animated buttons

Just playing around with transitions. No jQuery, just pure CSS3 buttons with descriptions.
HTML
<ul> <li><a href="#" class="round green">Login<span class="round">That is, if you already have an account.</span></a></li> <li><a href="#" class="round red">Sign Up<span class="round">But only if you really, really want to. </span></a></li> <li><a href="#" class="round yellow">Demo<span class="round">Take a look. This product is totally rad!</span></a></li> </ul>
CSS
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { width: 100%; height: 100%; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 13px; text-align: center; background: #333 url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png'); } ul { margin: 30px auto; text-align: center; } li { list-style: none; position: relative; display: inline-block; width: 100px; height: 100px; } @-moz-keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} } @-webkit-keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} } @-o-keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} } @keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} } .round { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-top: 30px; text-decoration: none; text-align: center; font-size: 25px; text-shadow: 0 1px 0 rgba(255,255,255,.7); letter-spacing: -.065em; font-family: "Hammersmith One", sans-serif; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out; box-shadow: 2px 2px 7px rgba(0,0,0,.2); border-radius: 300px; z-index: 1; border-width: 4px; border-style: solid; } .round:hover { width: 130%; height: 130%; left: -15%; top: -15%; font-size: 33px; padding-top: 38px; -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3); -o-box-shadow: 5px 5px 10px rgba(0,0,0,.3); -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3); box-shadow: 5px 5px 10px rgba(0,0,0,.3); z-index: 2; border-size: 10px; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } a.red { background-color: rgba(239,57,50,1); color: rgba(133,32,28,1); border-color: rgba(133,32,28,.2); } a.red:hover { color: rgba(239,57,50,1); } a.green { background-color: rgba(1,151,171,1); color: rgba(0,63,71,1); border-color: rgba(0,63,71,.2); } a.green:hover { color: rgba(1,151,171,1); } a.yellow { background-color: rgba(252,227,1,1); color: rgba(153,38,0,1); border-color: rgba(153,38,0,.2); } a.yellow:hover { color: rgba(252,227,1,1); } .round span.round { display: block; opacity: 0; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; font-size: 1px; border: none; padding: 40% 20% 0 20%; color: #fff; } .round span:hover { opacity: .85; font-size: 16px; -webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5); -moz-text-shadow: 0 1px 1px rgba(0,0,0,.5); -o-text-shadow: 0 1px 1px rgba(0,0,0,.5); text-shadow: 0 1px 1px rgba(0,0,0,.5); } .green span { background: rgba(0,63,71,.7); } .red span { background: rgba(133,32,28,.7); } .yellow span { background: rgba(161,145,0,.7); }
Read more:http://codepen.io/sethabbott/pen/FtuLz
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu