Today I want to share some experience with creating interactive animated elements (buttons) with CSS3. In our example I going to use hover and active states of our buttons. Please pay attention that our demo will work in browsers that support used CSS3 properties.
Live Demo
[sociallocker]
download result
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
Here are full html code of our result. Pay attention to classes of buttons. In our experiment I used 2 different types of buttons. Each type have own behavior. Each button consist of few inner SPAN elements.
index.html
01 | <!DOCTYPE html> |
02 | <html lang="en" > |
03 | <head> |
04 | <meta charset="utf-8" /> |
05 | <title>Pure CSS3 animated buttons | Script Tutorials</title> |
06 | <link href="css/main.css" rel="stylesheet" type="text/css" /> |
07 | <link href="css/buttons.css" rel="stylesheet" type="text/css" /> |
08 | <!--[if lt IE 9]> |
09 | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
10 | <![endif]--> |
11 | </head> |
12 | <body> |
13 | <div class="container" id="container"> |
14 | <div class="buttons"> |
15 | <a href="#" class="but1"> |
16 | <span class="icon"></span> |
17 | <span class="title">Button #1</span> |
18 | <span class="icon2"></span> |
19 | </a> |
20 | <a href="#" class="but1"> |
21 | <span class="icon"></span> |
22 | <span class="title">Button #2</span> |
23 | <span class="icon2"></span> |
24 | </a> |
25 | <a href="#" class="but1"> |
26 | <span class="icon"></span> |
27 | <span class="title">Button #3</span> |
28 | <span class="icon2"></span> |
29 | </a> |
30 | <div style="clear:both"></div> |
31 | <a href="#" class="but2"> |
32 | <span class="title">Join us</span> |
33 | <span class="extra"><span>For a free</span></span> |
34 | <span class="icon"></span> |
35 | </a> |
36 | <a href="#" class="but2"> |
37 | <span class="title">Try to search</span> |
38 | <span class="extra"><input type="text" /></span> |
39 | <span class="icon"></span> |
40 | </a> |
41 | <a href="#" class="but2"> |
42 | <span class="title">Subscribe</span> |
43 | <span class="extra"><input type="text" /></span> |
44 | <span class="icon"></span> |
45 | </a> |
46 | </div> |
47 | </div> |
48 | <footer> |
49 | <h2>Pure CSS3 animated buttons</h2> |
50 | <a href="https://www.script-tutorials.com/how-to-create-a-pure-css3-animated-buttons/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> |
51 | </footer> |
52 | </body> |
53 | </html> |
Step 2. CSS
Now – our CSS styles. First file is page layout
css/main.css
01 | /* page layout */ |
02 | *{ |
03 | margin:0; |
04 | padding:0; |
05 | } |
06 | body { |
07 | color:#fff; |
08 | font:14px/1.3 Arial,sans-serif; |
09 | background:transparent url(../images/bg.gif) repeat top left; |
10 | } |
11 | footer { |
12 | background-color:#212121; |
13 | bottom:0; |
14 | box-shadow: 0 -1px 2px #111111; |
15 | -moz-box-shadow: 0 -1px 2px #111111; |
16 | -webkit-box-shadow: 0 -1px 2px #111111; |
17 | display:block; |
18 | height:70px; |
19 | left:0; |
20 | position:fixed; |
21 | width:100%; |
22 | z-index:100; |
23 | } |
24 | footer h2{ |
25 | font-size:22px; |
26 | font-weight:normal; |
27 | left:50%; |
28 | margin-left:-400px; |
29 | padding:22px 0; |
30 | position:absolute; |
31 | width:540px; |
32 | } |
33 | footer a.stuts,a.stuts:visited{ |
34 | border:none; |
35 | text-decoration:none; |
36 | color:#fcfcfc; |
37 | font-size:14px; |
38 | left:50%; |
39 | line-height:31px; |
40 | margin:23px 0 0 110px; |
41 | position:absolute; |
42 | top:0; |
43 | } |
44 | footer .stuts span { |
45 | font-size:22px; |
46 | font-weight:bold; |
47 | margin-left:5px; |
48 | } |
49 | .container { |
50 | margin:20px auto; |
51 | padding:20px; |
52 | position:relative; |
53 | width:800px; |
54 | } |
And now – styles of our buttons
css/buttons.css
001 | /*buttons #1*/ |
002 | .buttons { |
003 | overflow:hidden; |
004 | } |
005 | .but1{ |
006 | border-radius:10px; |
007 | -moz-border-radius:10px; |
008 | -webkit-border-radius:10px; |
009 | box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); |
010 | -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); |
011 | -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); |
012 | background-color:#f4f5fe; |
013 | display:block; |
014 | float:left; |
015 | margin:10px; |
016 | overflow:hidden; |
017 | padding:10px 15px; |
018 | position:relative; |
019 | text-decoration:none; |
020 | transition:all 0.5s ease-in-out; |
021 | -moz-transition:all 0.5s ease-in-out; |
022 | -o-transition:all 0.5s ease-in-out; |
023 | -webkit-transition:all 0.5s ease-in-out; |
024 | } |
025 | .but1 .icon{ |
026 | background:transparent url(../images/download.png) no-repeat top left; |
027 | float:left; |
028 | height:32px; |
029 | width:45px; |
030 | transition:all 0.5s ease-in-out; |
031 | -moz-transition:all 0.5s ease-in-out; |
032 | -o-transition:all 0.5s ease-in-out; |
033 | -webkit-transition:all 0.5s ease-in-out; |
034 | } |
035 | .but1 .title{ |
036 | font-size:18px; |
037 | color:#000; |
038 | display:block; |
039 | float:left; |
040 | font-weight:bold; |
041 | line-height:32px; |
042 | } |
043 | .but1 .icon2{ |
044 | background:transparent url(../images/download2.png) no-repeat top left; |
045 | height:32px; |
046 | left:20px; |
047 | opacity:0; |
048 | position:absolute; |
049 | top:-15px; |
050 | width:32px; |
051 | } |
052 | .but1:hover{ |
053 | background-color:#e3e3ff; |
054 | box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); |
055 | -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); |
056 | -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); |
057 | -webkit-transition-delay: 0.5s; |
058 | -moz-transition-delay: 0.5s; |
059 | -o-transition-delay: 0.5s; |
060 | -ms-transition-delay: 0.5s; |
061 | transition-delay: 0.5s; |
062 | } |
063 | .but1:hover .icon{ |
064 | transform:rotate(-90deg) scale(0.8); |
065 | -ms-transform:rotate(-90deg) scale(0.8); |
066 | -moz-transform:rotate(-90deg) scale(0.8); |
067 | -o-transform:rotate(-90deg) scale(0.8); |
068 | -webkit-transform:rotate(-90deg) scale(0.8); |
069 | } |
070 | .but1:active .icon{ |
071 | opacity:0; |
072 | } |
073 | .but1:active .icon2{ |
074 | opacity:1; |
075 | -webkit-animation:slideDown1 1.0s linear infinite; |
076 | -moz-animation:slideDown1 1.0s linear infinite; |
077 | animation:slideDown1 1.0s linear infinite; |
078 | } |
079 | .but1:active{ |
080 | background-color:#c1c1ff; |
081 | box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8); |
082 | -moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8); |
083 | -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8); |
084 | } |
085 | @keyframes slideDown1{ |
086 | 0% { |
087 | top: -30px; |
088 | } |
089 | 100% { |
090 | top: 55px; |
091 | } |
092 | } |
093 | @-webkit-keyframes slideDown1{ |
094 | 0% { |
095 | top: -30px; |
096 | } |
097 | 100% { |
098 | top: 55px; |
099 | } |
100 | } |
101 | @-moz-keyframes slideDown1{ |
102 | 0% { |
103 | top: -30px; |
104 | } |
105 | 100% { |
106 | top: 55px; |
107 | } |
108 | } |
109 | /*buttons #2*/ |
110 | .but2{ |
111 | border-radius:15px; |
112 | -moz-border-radius:15px; |
113 | -webkit-border-radius:15px; |
114 | background-color:#99cc99; |
115 | float:left; |
116 | height:40px; |
117 | margin:10px; |
118 | overflow:hidden; |
119 | padding-left:20px; |
120 | position:relative; |
121 | text-decoration:none; |
122 | transition:all 0.5s linear; |
123 | -moz-transition:all 0.5s linear; |
124 | -o-transition:all 0.5s linear; |
125 | -webkit-transition:all 0.5s linear; |
126 | } |
127 | .but2 .title{ |
128 | color:#000000; |
129 | display:block; |
130 | float:left; |
131 | font-size:18px; |
132 | font-weight:bold; |
133 | line-height:40px; |
134 | transition:all 0.2s linear; |
135 | -moz-transition:all 0.2s linear; |
136 | -o-transition:all 0.2s linear; |
137 | -webkit-transition:all 0.2s linear; |
138 | } |
139 | .but2 .extra{ |
140 | background-color:#63707e; |
141 | color:#fff; |
142 | float:left; |
143 | font-size:18px; |
144 | line-height:40px; |
145 | opacity:0; |
146 | position:relative; |
147 | text-transform:uppercase; |
148 | width:0px; |
149 | transition:all 0.3s linear; |
150 | -moz-transition:all 0.3s linear; |
151 | -o-transition:all 0.3s linear; |
152 | -webkit-transition:all 0.3s linear; |
153 | } |
154 | .but2 .extra span, .but2 .extra input { |
155 | display:none; |
156 | } |
157 | .but2 .icon{ |
158 | background:transparent url(../images/right.png) no-repeat center center; |
159 | float:left; |
160 | height:40px; |
161 | width:40px; |
162 | transition:all 0.3s linear; |
163 | -moz-transition:all 0.3s linear; |
164 | -o-transition:all 0.3s linear; |
165 | -webkit-transition:all 0.3s linear; |
166 | } |
167 | .but2:hover .extra span, .but2:hover .extra input{ |
168 | display:inline-block; |
169 | } |
170 | .but2:hover .extra{ |
171 | margin-left:10px; |
172 | opacity: 1; |
173 | padding-left:10px; |
174 | padding-right:10px; |
175 | text-align:center; |
176 | width:150px; |
177 | } |
178 | .but2:hover .icon{ |
179 | transform:rotate(180deg); |
180 | -ms-transform:rotate(180deg); |
181 | -moz-transform:rotate(180deg); |
182 | -o-transform:rotate(180deg); |
183 | -webkit-transform:rotate(180deg); |
184 | } |
Live Demo
Conclusion
Thats all, all was really easy, isn’t it? The result was great. I hope that our nice tips help you. Good luck!
