CSS3 - a higher CSS standard for designing HTML layout on web applications - is gradually being used widely. CSS3 is gradually affirming the position and benefit to CSS2, by from strong support of modern browsers: Firefox 3.5+, Google Chrome, Safari, ...

CSS3 has a lot of technical specifications and new features. However, within the scope of this JavaScript article, the author only shows the powerful ability of CSS3 to build the awesome, unique buttons. Please go to the full JavaScript article page for the addresses of CSS3 resources.

• Demo
• Enlarge
• Reload
• New window

CSS3 is the partially implemented sequel to the CSS2 spec we all know and
love. It's already popping up in new browsers such as Firefox 3.5, Safari 4 and
Chrome. In this article, the first of the articles that explore practical (and
even far-fetched) implementation of CSS3, we start by applying CSS3 to something
we all have to create: buttons.

Calls to action are critical for any website, and a compelling,
attention-grabbing, clickable button goes a long way toward driving that
engagement. In the past, really awesome buttons needed extra markup, sliding
doors or other trickery. We'll show you here how to create nice button styles
without any hacks or cheats.

Demo:
http://www.smashingmagazine.com/2009/12/02/pushing-your-buttons-with-practical-css3/

Simply Butons v2 with Javascript Enhancements

p51Labs came up with the  v2. Buttons auto resize itself to fit text. There are 3 states:
Inactive, Active, and Hover. They look and behave the same way in every browser
and operating system. However, the caveats are the outlines on the buttons, the
text is selectable. And These buttons are not mobile friendly.

With Simply-Buttons Javascript component provided, you can solve the caveats
above as well. You can easily modify the buttons look and feel. You can do this
by creating your own stylesheet.

Demo: http://www.p51labs.com/simply-buttons-v2/

How to Create Glowing, Radioactive Buttons with CSS

Using CSS animations in Safari, we're able to turn an otherwise ordinary
button into a glowing,  Buttons. Be sure you're in Safari / Chrome browser before getting
underway. You can set the Animation name, Animation duration and the
number of times it repeats.

You can see how these come together on the right. The CSS calls a pre-defined
animation you create, assigns it a duration, and tells it how long to repeat.
Pretty sweet, right?

Demo: http://www.zurb.com/playground/radioactive-buttons

Note: Demo works best in Safari 4.x and, um, not so much in Firefox 3.5.

Colorful and Scalable Buttons with CSS3 & RGBA

One of great things about CSS3 is the addition of RGBA, a color mode that
adds alpha-blending to your favorite CSS properties. ZURB has kicked the tires
on it a bit with their own projects and have found that it helps streamline
their CSS and makes scaling things like buttons very easy. To show you how, ZURB
has cooked up an example of some  Awesome Buttons with CSS3 and RGBA.

With a little CSS3 magic, we can create a scalable set of buttons with nearly
half the CSS it would have taken with hex colors. Give it a go in your next
project and see how it can help add that extra polish you want without huge
impact on your code.

Demo: http://www.zurb.com/blog_uploads/0000/0401/buttons-01.html

Beautiful Scalable CSS Buttons

Kitchen wrote an article: CSS Buttons Using PNG and Background Colors taught us how to create dynamic
CSS Buttons using PNG, transparency and background colors that degrades nicely
and supports full scalability.

It is really handy for developers because the length of the button will be
changed according to the length of the text. The buttons are very pretty with
Web 2.0 style. The color of the button changed if you hover on it. However, the
buttons are not looking very nice in Internet Explorer 6.0, hope there is a
version which supports IE 6.0 as well soon.

Demo: http://monc.se/kitchen/stew/buttons/btn.html

Simple Round CSS Buttons ( Wii Buttons )

Hedger Wang teaches us how to create rounded corner buttons with only One
Image and One
CSS file. Users can see different state of the buttons, e.g.
disabled, mouseover and mouseout state. So that the users can feel more
interactive with the website or web application. We can also use this technics
to create Wii-like buttons.

Demo: http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php

• Code
• Print

• Comment (1)
• Write

by Ian Harte, 09/06/2011 04:06 PM
Reply

Nice freebie post! Not sure I'm overly keen on any of these though! Keep them coming though.

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New