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

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

• 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