Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Buttons >> Animated Button


Code Snippet </> Info


Snippet Name: Animated Button

Description: Easily create animated buttons using strictly CSS.

Example: View Code Demo

Note: Adjust the size and color styles to your preferences.

Author:

Last Modified: 2015-08-26 21:37:17

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library