Animated Button - Easily create animated buttons using strictly CSS.
Example: View Code Demo
<!DOCTYPE html> <html> <head> <title>CSS Animated Button</title> <style> /* Begin CSS Animated Button */ /* This Script Free To Use Providing This Notice Remains */ /* This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library */ * {padding:0; margin:0;} body {font-family:verdana,arial,ms sans serif;font-size:90%;color:#000000;background-color:#ffffff;text-shadow:0px 1px 0px rgba(0,0,0,0.4);} a:link, a:visited {text-decoration:none;color:#0000ff;border:none;} a img {border:none;} div.wrapper {margin-left:30px;} div.mod {margin:0 0 30px 0;padding:30px;} /* button styles */ .btn { display:inline-block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -webkit-box-shadow:0 8px 0 #1a74a1, 0 15px 20px rgba(0, 0, 0, .35); -moz-box-shadow:0 8px 0 #1a74a1, 0 15px 20px rgba(0, 0, 0, .35); box-shadow:0 8px 0 #1a74a1, 0 15px 20px rgba(0, 0, 0, .35); -webkit-transition:-webkit-box-shadow .2s ease-in-out; -moz-transition:-moz-box-shadow .2s ease-in-out; -o-transition:-o-box-shadow .2s ease-in-out; transition:box-shadow .2s ease-in-out; } .btn span { display:inline-block; padding:10px 20px; font-family:"cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif; line-height:1; text-shadow:0 -1px 1px rgba(19, 65, 88, .8); background:#3194c6; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6)); background:-moz-linear-gradient(#3194c6, #5bacd6); -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, .15); -moz-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, .15); box-shadow:inset 0 -1px 1px rgba(255, 255, 255, .15); -webkit-transition:-webkit-transform .2s ease-in-out; -moz-transition:-moz-transform .2s ease-in-out; -o-transition:-o-transform .2s ease-in-out; transition:transform .2s ease-in-out; color:#ffffff; } .btn:active { -webkit-box-shadow:0 8px 0 #1a74a1, 0 12px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0 8px 0 #1a74a1, 0 12px 10px rgba(0, 0, 0, .3); box-shadow:0 8px 0 #1a74a1, 0 12px 10px rgba(0, 0, 0, .3); -webkit-transition:-webkit-transform 0s ease-in-out; -moz-transition:-moz-transform 0s ease-in-out; -o-transition:-o-transform 0s ease-in-out; transition:transform 0s ease-in-out; } .btn:active span { -webkit-transform:translate(0, 4px); -moz-transform:translate(0, 4px); -o-transform:translate(0, 4px); transform:translate(0, 4px); -webkit-transition:-webkit-transform 0s ease-in-out; -moz-transition:-moz-transform 0s ease-in-out; -o-transition:-o-transform 0s ease-in-out; transition:transform 0s ease-in-out; } </style> </head> <body> <div class="wrapper"> <h1>CSS Animated Button</h1> <div class="mod"><a href="#" class="btn"><span>Press Me For Example!</span></a> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_133.html">Animated Button</a> page. ] </div> </body> </html>