Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 276 lines (158 sloc) 11.847 kb
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
1
2 <!doctype html>
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Sexy CSS3 Buttons | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <meta name="description" content="Update: Chris Eppstein pointed out the obvious, a neat fancy buttons plugin for Compass that provides simple gradient fancy buttons without using an &hellip;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/sexy-css3-buttons.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
20
21 </head>
22
23
24 <body >
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
29 <h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
30
31 </header>
32 <nav class="sitenav"><a href="/">Home</a>
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
a4c458e @nimbupani Site updated at 2013-05-10 20:53:38 UTC
authored
35 </nav>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
36
37
38
39
40
41
42
43
44 <article>
45 <nav class="article">
46
47 <a class="previous" href="/accessible-css-barcharts.html" title="Accessible CSS Barcharts">&#x276C;</a>
48
49
50 <a class="next" href="/book-reviews-for-august-2010.html" title="Book Reviews for August 2010">&#x276D;</a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
5310a1e @nimbupani Site updated at 2013-12-12 13:59:18 UTC
authored
63 <time datetime="2010-08-17T00:00:00+05:30" pubdate><span class='month'>Aug</span> <span class='day'>17</span> <span class='year'>2010</span></time>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
64
65 <h1 class="entry-title"><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></h1>
66
67
68
69
70 </header>
71 <div class="entry-content"><p><b>Update:</b> <a href="http://chriseppstein.github.com">Chris Eppstein</a> pointed out the obvious, a neat <a href="http://brandonmathis.com/projects/fancy-buttons/demo/">fancy buttons plugin for Compass</a> that provides simple gradient fancy buttons without using an extra element in the markup.</p>
72
73
74 <p>I do not wear the mantle of Open Web Vigilante lightly. Granted, I may slack off now and then (who doesn&#8217;t?), I pay serious attention when claims of <a href="http://technology.posterous.com/make-css3-buttons-that-are-extremely-fancy">Extremely Fancy CSS3 Buttons</a> are made.</p>
75
76
77 <p></p>
78
79 <p><a href="http://nimbupani.com/demo/sexycss3buttons/"><img src="http://nimbupani.com/files/post_buttons_png_scaled500.png" alt="post_buttons.png.scaled500.png" border="0" width="500" height="70"></a></p>
80
81
82 <p>Now, now, you might think, at first glance, I should be crying tears of joy at the grace and beauty of the purely CSS buttons, but I do not. Here’s why:</p>
83
84
85
86
87 <ol>
88 <li>It uses 3 elements to do what essentially should be restricted to 1, the button element.</li>
89 <li>It uses a <code>div</code> tag to create a button, which violates my semantic rule book.
90 </li>
91 <li>
92 The <code>div</code> means all buttons are block elements and will never be flexible and always need to have width set. That does not sound too buttony!
93 </li>
94 <li>The example cites using a span with inline background color. I know everyone is lax about inline CSS, but as a Vigilante I NEVER AM (mostly)! </li>
95 <li>So if you want to center these buttons you cannot, since they are floated block elements.</li>
96 </ol>
97
98
99
100
101 <p>The demo looked ripe for some vigilante action. Here is the re-worked HTML code for a button: </p>
102
103
104
105
106 <pre>&lt;a class=&quot;fancy_button&quot; href=&quot;#&quot;&gt;&lt;b&gt;Post&lt;/b&gt;&lt;/a&gt;</pre>
107
108
109
110
111 <p>If you are not fixated with the colors, you could drop the <code>b</code> element.</p>
112
113
114
115
116 <p>Here is the CSS for rendering the normal state of the button (you can see the full CSS on <a href="http://nimbupani.com/demo/sexycss3buttons/">the Sexy Buttons demo</a>):</p>
117
118
119 <pre>
120 .fancy_button {
121 display: inline-block;
122 position: relative;
123 padding: 0.25em 2em;
124 border: 1px solid;
125 border-color: transparent transparent rgba(202,202,202,0.27) transparent;
126 -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
127 -webkit-background-clip: padding-box;
128 }
129
130 .fancy_button b {
131 display: block;
132 z-index: 2; /* Necessary to make this top-most element */
133 position: relative;
134 text-shadow: rgba(0,0,0,0.45) 0 -1px 0;
135 }
136
137 .fancy_button:before,
138 .fancy_button:after {
139 position: absolute;
140 width: 100%;
141 height: 100%;
142 content: ""; /* Necessary to render these pseudo-elements */
143 display: block;
144 -webkit-background-clip: padding-box;
145 }
146
147 .fancy_button:before {
148 top: -4px;
149 left: -4px;
150 padding: 4px;
151 background: #086f14;
152 background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(77,77,77,0.4)));
153 background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4));
154 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
155 }
156
157 .fancy_button:after {
158 top: -1px;
159 left: -1px;
160 border: 1px solid;
161 border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.3) rgba(0,0,0,0.6) rgba(0,0,0,0.3);
162 -webkit-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
163 -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
164 background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)), color-stop(0.5, rgba(255,255,255,0.01)), to(transparent));
165 background: transparent -moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
166 }
167 </pre>
168
169
170
171
172 <p>Some explanation is warranted:</p>
173
174
175 <p></p>
176
177 <ol>
178 <li><a href="http://caniuse.com/#feat=css3-colors">Effectively only IE8 &amp; below need rgb replacements for rgba</a>, so I have moved such degradations to an IE specific selector. </li>
179 <li>I dislike the need for an additional b element. The only reason it exists is, otherwise the text will look grey as it will be behind the gradients. If you have a better solution, do comment!</li>
180 <li>This technique uses pseudo-elements (<code>:before</code> and <code>:after</code>), since they are more CSS3 than using divs and spans :). I have also gathered the common styles of these elements together.</li>
181 <li><p>IE8 and below get the same simple button treatment:</p><p><img src="http://nimbupani.com/files/postbuttonsie_0.png" alt="postbuttonsie.png" border="0" width="544" height="67"></p></li>
182 <li>
183 IE9 will render the box-shadow and rgba colors, if not the gradients. If you need to tweak this style, you just have to prefix your selector with <code>.ie9</code> in the CSS (provided you are using <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">IE conditional comments</a>.</li>
184 </ol>
185
186
187
188
189 <p>This button graphic is a bit too heavy for my taste :) but if this is the look you want, you can <a href="http://nimbupani.com/demo/sexycss3buttons/">consider this</a>!</p>
190
191
192
193 </div>
194
195 <footer>
196 <p class="meta">This post was posted by
197
198
199 <a href="/about.html">Divya Manian</a>
200 on
201
202
203
204
205
206
5310a1e @nimbupani Site updated at 2013-12-12 13:59:18 UTC
authored
207 <time datetime="2010-08-17T00:00:00+05:30" pubdate><span class='month'>Aug</span> <span class='day'>17</span> <span class='year'>2010</span></time> in
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
208
209 <span class="categories">
210
211 <a class='category' href='/categories/web-development/'>Web Development</a>
212
213 </span>
214
215 . If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-08-17-sexy-css3-buttons.md">please send a pull request</a>.
216 </p>
217 </footer>
218 </article>
219
220 <section>
221 <h1>Comments</h1>
222 <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
223 </div>
224 </section>
225
a4c458e @nimbupani Site updated at 2013-05-10 20:53:38 UTC
authored
226
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
227 </div>
228 </div>
229 <aside id="articles">
5310a1e @nimbupani Site updated at 2013-12-12 13:59:18 UTC
authored
230 <p><img class="avatar" src="http://a2.twimg.com/profile_images/1696865113/me_normal" height=48> <a href="http://twitter.com/divya">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
231 <h2>Posts on Web Development</h2>
a4c458e @nimbupani Site updated at 2013-05-10 20:53:38 UTC
authored
232 <ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
233 </aside>
234 <footer role="contentinfo"><p>
6c3ac34 @nimbupani Site updated at 2013-05-10 00:34:01 UTC
authored
235 Copy to your heart’s content 2013 - Divya Manian -
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
236 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
237 </p>
238
239
240 </footer>
241
242
243 <script type="text/javascript">
244 var disqus_shortname = 'nimbublog';
245 var disqus_developer = 1;
246
247
248 var disqus_url = 'http://nimbupani.com/sexy-css3-buttons.html';
249 var disqus_identifier = 'http://nimbupani.com/sexy-css3-buttons.html';
250
251
252
253
254 (function () {
255 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
256 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
257 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
258 }());
259 </script>
260
261
262 <script src="/javascripts/octopress.js"></script>
263
264 <script>
265 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
266 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
267 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
268 s.parentNode.insertBefore(g,s)}(document,'script'));
269 </script>
270
271
272
273
274 </body>
275 </html>
Something went wrong with that request. Please try again.