Pushing Your Buttons With Practical CSS3

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

Download Free Buttons in PNG and PSD Format

The author of Button-Download.com has
been keeping the buttons he made in the past. Now he has released all of them to
us. All of the buttons are in PNG and PSD format, so that you can edit the
buttons as you like. You are free to use these buttons your personal and
commercial projects. To make your life easier, you can also download these
buttons all at once by clicking the "All Download" button as well.

Demo: http://www.button-download.com/

How to Create Skype-like Buttons with jQuery

If you use Skype I am sure that you noticed that animated button for adding
more people to a chat. When you mouseover on it, the icon on the left "jumps"
for a few times. The animation looks really attractive.

Janko is going to show you how to create the  Buttons using jQuery and some simple CSS. The code is tested in Firefox,
Safari and IE7.

Demo: http://www.jankoatwarpspeed.com/examples/skype_buttons/

Reusable Imageless Google Custom Buttons

Until some future version of HTML gives us new native controls to use in a
browser, at Google, they have been playing and experimenting with controls they
call " Buttons" in their apps (among other custom controls). These buttons just
launched in Gmail and Google Reader recently.

The buttons are designed to look very similar to basic HTML input buttons.
But they can handle multiple interactions with one basic design. The buttons
we're using are imageless, and they're created entirely using HTML and CSS, plus
some JavaScript to manage the behavior. They're also easily skinnable with a few
lines of CSS, which was a key factor now that Gmail has themes.

Demo: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html

Set Of Free Web Application Buttons By WebResourcesDepot

Today WebResourcesDepot realeased  of web application buttons. The button set is a nice and has a good look.
This Set contains a PSD file with well grouped layers. You can easily create new
buttons by duplicating or editing the current ones.

Demo :
http://www.webresourcesdepot.com/web-applications-classic-button-set/

Beautiful CSS buttons with icon set

I love clean design and in general simple solutions to design nice and
attractive elements for my websites. This tutorial illustrates how to design
nice clean buttons using some lines of HTML, CSS code and proxal
icon set. The result is something like this:

Demo:
http://woork.blogspot.com/2008/06/beautiful-css-buttons-with-icon-set.html

CSS Oval buttons

CSS Oval Buttons and  Square Buttons from Dynamic Drive are two other articles that show the
effectiveness of CSS sliding doors.

Demo:
http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/

Create a CSS3 Button That Degrades Nicely

There was a time where creating a nice looking, scalable button required
heavy use of images, the sliding doors technique and even some javascript. As it
stands a lot of the modern browsers support the css we would like to use to
create a nice looking button. Firefox, Safari and Opera all have support for
rounder corners, box shadows and text shadows. What used to take six steps and
lots of extra mark-up, images and css, now only takes three steps and some
simple CSS3.

Demo:
http://stylizedweb.com/2009/10/08/create-a-css3-button-that-degrades-nicely/

Buttons without Images Using CSS3

When wanting to add anything more than very basic styling to a button on a
webpage, images are often used as the styling offered by CSS has been limited,
especially when one wants to keep the HTML semantically clean. There are also
notorious browser differences when styling any kind of form elements across
browser and platforms

Demo: http://my.opera.com/dstorey/blog/show.dml/717521