Once upon a time when a web design required a nice, functional button it would firstly have to been designed in photoshop then implemented with javascript. Until CSS3 came in and changed everything to be easier and better for us.
Pretty CSS3 Buttons
The object is to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. And creating a button that is scalable means that we can make it a variety of sizes and colours with ease.
Dynamic Buttons using CSS3
The following example demonstrates how to create nice looking, dynamic buttons that are fully scalable using the new CSS3 properties border-radius, box-shadow and RGBa
Roll Your Own Google Buttons
Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection.
Sexy Buttons
Sexy Buttons is a HTML/CSS-based framework for creating beautiful web site buttons. These stylish, attention getting buttons can be used for calls to action wherever user interaction is desired. Compare Sexy Buttons with the standard browser buttons
Radioactive Buttons with CSS Animation & RGBa
Using CSS animations in Safari, you’re able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome.
To make it work, you first have to specify all your button styles and then you add the shadows. Now, in the animation, you switch from a box-shadow that matches the background color to the color of the button to give it the glowing effect – And then you add in some animation. Awesome
The Super Awesome Buttons
The super awesome buttons is to showcase what can now be done with CSS and RGBA. They are so awesome! They still look like images but the loading speed and maintainability continues to benefit from normal HTML buttons.
Simple Buttons with CSS Sprites
The button is one of the most common elements in the world of the web. In modern web design buttons are used not only on forms, but also as visual aids that draw attention to important elements of the page. Let’s take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example
Beautiful Buttons with CSS Gradients
Using a CSS-based method means you don’t have to regenerate images every time you change text, pages will load much faster and it allows text to be easily localised. In this case it also makes the page better from an accessibility standpoint.
Better Button & Nav Interactions
In this well described tutorial the button you will build has a distinct :hover and :active states so that it depresses when clicked. The text also bumps down 1 pixel and the text-shadow changes to give it a 2-dimensional feel. Now that CSS3 is gaining wider support, most of this styling and behavior can be done pretty easily.
Nice 3D Ribbons Using CSS3 Only
Yes, it is possible to create a simple and nice 3D layout with some CSS3 properties, only using code and without the help of any graphic editor. You will be using box-shadow to create a drop-shadow with RGBa, border-radius and the transform property for the single items of the list to make a nice 3D effect
