After reading Douglas Bowman's article Recreating the button on stopdesign, I was curious if I could create similar "Google-style" buttons in a different fashion. I was also interested in finding out if I could do so with less mark-up and still have a consistent experience cross-browser.
Recreating the button
suggests an html structure along these lines:
(Note: The article's example uses the <button> tag as the shell. I've opted to use <a> for my version. Either way, this will not effect the final output.)
<button>
<span>
button text
</span>
</button>
Using the resources already existant in modern browsers, and with the intent that over time newer browsers will have full implementation of the ccs3
border-radius
property, I opted to remove the extra <span> tag from the above example and render my rounded corners with pure css.
<a href="#" class="bt"> This is my button </a>
<a href="#" class="bt"> This is my button — but with longer text </a>
<a href="#" class="bt"> This is my button <br/> but with <br/> multiple lines </a>
<a href="#" class="bt"> <big>This is my button with bigger text!</big> </a>
a.bt {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
padding: 4px 6px 2px;
.padding-bottom: 4px; /* IE hack to fix spacing issue. */
text-decoration: none;
text-align: center;
background: #f9f9f9;
color: black;
border: 1px solid;
border-top-color: #ccc;
border-left-color: #ccc;
border-right-color: #bbb;
border-bottom-color: #bbb;
}
a.bt:hover {
border-color: #99ccff;
}
While the above css succeeds in rendering buttons with rounded corners on all the modern
browsers, (except Opera at the time of writing [v9.64, build 5270],) no current versions
of Internet Explorer (versions 6 — 8) support the
border-radius
property.
My purposed solution to this problem was to employ the use of some javascript, served through a conditional comment, to apply a form of border radius to Internet Explorer. Specifically, I used DD_roundies, developed by Drew Diller.
The proceeding code creates an effect identical to
border-radius
in all versions of Internet Explorer
<!--[if IE]>
<script type='text/javascript'>
DD_roundies.addRule('a.bt', '3px');
</script>
<![endif]-->
In Douglas Bowman's article, he demonstrates a method of creating a gradient effect inside buttons using pure css with the following html structure:
<button>
<span>
<span>
<b></b>
<u>
button text
</u>
</span>
</span>
</button>
I'm not a big fan of using the depreciated <u> and <b> tags, so I'll be substituting them with alternate tags. I'm also going to try building the gradient using one less tag layer.
<a href="#" class="bt bt-gradient"> <em></em> <span>This is my button</span> </a>
a.bt-gradient {
position: relative;
overflow: hidden;
}
a.bt-gradient span {
position: relative;
z-index: 2;
}
a.bt-gradient em {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
height: 40%;
width: 100%;
background: #e3e3e3;
border-top: 3px solid #eee;
}
a.bt-gradient:hover em {
top: 0;
border-top: 0;
border-bottom: 3px solid #eee;
}
Sadly, this method does not work perfectly for Internet Explorer. The <em> that is absolutely positioned inside the button extends past the border around the link. Even trying to add an additional tag layer, as per the original article, does not solve the issue.
As an overall alternative, it is just as easy to cut a 1px wide gif and just use the css
background-image
property to tile it and create the same or even better effect.
The above listed techniques lend themselves to lots of different variations. Below is an example of a 3-button "pillbox" style of navigation. View Source on this page if you're interested in seeing how this was achieved.
While the pure css gradient was not a great success in Internet Explorer, using css3 properties and a bit of javascript to tweak IE, I feel I've made some useful improvements to create "google-style" buttons. Hopefully you'll find these techniques helpful for future front-end projects.