The Poor Man’s CSS3 Button

The Poor Man’s CSS3 Button

I call them Pez

I received a tweet the other day about these cool CSS3 buttons called BonBon Buttons. The site says they are named after the French word for candy, but after looking at them, they look like Pez to me. Hmmm…that is what I will call mine…Pez! Regardless they are very pretty. Even better, the creator of them lists where it won’t work. He was just tooling around one day and made these buttons. Well, I decided to do the “poor man’s version” of those. And unlike the BonBon buttons, my Pez button will work in IE6 as long as you use CSS PIE, with the exception of text-shadow, and the radial gradient. Those two properties don’t add all that much, and even without them they look good in IE.


View Demo

Are there 4 tons of CSS involved?

There is well over 100 lines of CSS in the BonBon version, so I wanted to reduce that amount to something close to manageable. It still looks good, but I had to cut a bunch of stuff out. Here is a look at the actual CSS code for my button.

a {
position: relative;
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #76A14B;
text-decoration: none;
text-align: center;
-webkit-border-radius: 25px 10px 25px 10px;
-moz-border-radius: 25px 10px 25px 10px;
border-radius: 25px 10px 25px 10px;
border: 2px solid #BFE599;
padding: 10px 20px;
display: block;
width: 100px;
margin: 0 auto;
-moz-box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
-webkit-box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
text-shadow: 2px 2px 5px #ffffff;
behavior: url(images/PIE.htc);
}
 
.glassy {
background: -moz-radial-gradient(center top , ellipse farthest-corner, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), -moz-linear-gradient(top, #CCFF99, #99CC66);
background-image: -webkit-gradient(radial, 100 100, 32, 118 118, 15, from(rgba(255, 255, 255, 0)), to(#ffffff)), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFF99), to(#99CC66));
-pie-background: linear-gradient(top, #CCFF99, #99CC66);
}

The glassy part adds the background gradients as well as white radial gradient at the top of the button. So I reduced it down to like 30 lines of CSS for a pretty cool button.There are a few things to note:

1) As stated before, you MUST use CSS Pie for this to work in IE.

2) Ignore the webkit radial gradient, because I didn’t figure out how to do it correctly. Webkit’s syntax is a pain in the ass, so I just didn’t get it working correctly. If anyone wants to get that part done and post it, that would be great.

3) For IE6 to work, the ‘a’ tag MUST be positioned relative. The effects get blow away if you do not.

Final thoughts on this little experiment

The really cool part for me about doing this, is that I’ve used two things/techniques from my previous posts. I’m using CSS Pie, and using multiple box-shadows on an element, which I wrote about here.

I really like taking other people’s code, and seeing if I can do it with less code. Granted, here I am leaving some things out, but the overall effect comes through. My Pez button still looks like candy, and it didn’t take a vast amount of CSS to work. Would I use this button myself rather than cut images? Actually, with it pre-made, yes. If it wasn’t, then no. It took me a while to get everything the way I wanted it, and you just can’t waste that much creating a single button. So in production, I would have Sliced ‘n’ Diced an image. Now, if you had a library of pre-made, small weight budget CSS3 buttons, then I might start using these types of things more often. Maybe I’ll start one and throw it out for you guys.

Take the code above and have fun with it. If you come up with something better, let me know!

Coupon Code: webmachine

Tags:

Leave a Reply