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: 2019-12-09 00:18:02
Language: css
Highlight Mode: css
|
| Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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>
|
