Find file
Fetching contributors…
Cannot retrieve contributors at this time
276 lines (158 sloc) 11.6 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sexy CSS3 Buttons | Divya Manian</title>
<meta name="author" content="Divya Manian">
<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;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/accessible-css-barcharts.html" title="Accessible CSS Barcharts">&#x276C;</a>
<a class="next" href="/book-reviews-for-august-2010.html" title="Book Reviews for August 2010">&#x276D;</a>
<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>
<h1 class="entry-title"><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></h1>
<div class="entry-content"><p><b>Update:</b> <a href="">Chris Eppstein</a> pointed out the obvious, a neat <a href="">fancy buttons plugin for Compass</a> that provides simple gradient fancy buttons without using an extra element in the markup.</p>
<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="">Extremely Fancy CSS3 Buttons</a> are made.</p>
<p><a href=""><img src="" alt="post_buttons.png.scaled500.png" border="0" width="500" height="70"></a></p>
<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>
<li>It uses 3 elements to do what essentially should be restricted to 1, the button element.</li>
<li>It uses a <code>div</code> tag to create a button, which violates my semantic rule book.
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!
<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>
<li>So if you want to center these buttons you cannot, since they are floated block elements.</li>
<p>The demo looked ripe for some vigilante action. Here is the re-worked HTML code for a button: </p>
<pre>&lt;a class=&quot;fancy_button&quot; href=&quot;#&quot;&gt;&lt;b&gt;Post&lt;/b&gt;&lt;/a&gt;</pre>
<p>If you are not fixated with the colors, you could drop the <code>b</code> element.</p>
<p>Here is the CSS for rendering the normal state of the button (you can see the full CSS on <a href="">the Sexy Buttons demo</a>):</p>
.fancy_button {
display: inline-block;
position: relative;
padding: 0.25em 2em;
border: 1px solid;
border-color: transparent transparent rgba(202,202,202,0.27) transparent;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
-webkit-background-clip: padding-box;
.fancy_button b {
display: block;
z-index: 2; /* Necessary to make this top-most element */
position: relative;
text-shadow: rgba(0,0,0,0.45) 0 -1px 0;
.fancy_button:after {
position: absolute;
width: 100%;
height: 100%;
content: ""; /* Necessary to render these pseudo-elements */
display: block;
-webkit-background-clip: padding-box;
.fancy_button:before {
top: -4px;
left: -4px;
padding: 4px;
background: #086f14;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(77,77,77,0.4)));
background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4));
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
.fancy_button:after {
top: -1px;
left: -1px;
border: 1px solid;
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);
-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;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
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));
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);
<p>Some explanation is warranted:</p>
<li><a href="">Effectively only IE8 &amp; below need rgb replacements for rgba</a>, so I have moved such degradations to an IE specific selector. </li>
<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>
<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>
<li><p>IE8 and below get the same simple button treatment:</p><p><img src="" alt="postbuttonsie.png" border="0" width="544" height="67"></p></li>
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="">IE conditional comments</a>.</li>
<p>This button graphic is a bit too heavy for my taste :) but if this is the look you want, you can <a href="">consider this</a>!</p>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<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
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="" height=48> <a href="">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<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>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];