Reusable CSS: buttons
This is a small collection of reusable CSS buttons that should be ready to add to your site and use with immediate effect.
All of the following buttons render well in Firefox 4+, Chrome 11+, Safari 5+, and IE9+. Opera 11 is lacking a bit in the rendering of the "Raised buttons", but should hopefully support transforms on pseudo elements soon.
The 'Raised At The Edges' button
This look was inspired by my post on box-shadow and CSS transforms, as well as the 'Press This' button found in the WordPress admin.
download this button set
The Glass button
This button was inspired by the buttons on Lea Verou's RGBa.php tool. In addition to the basic buttons, there are buttons that serve to provide visual cues as to the function of the button.
download this button set
These buttons are best used on textured backgrounds. Make sure to modify the values I've used to suit your sites' needs.
Buttons like Google
These buttons are an adaptation of the Google buttons at Pixify.com. I've made minor changes to what I feel improves the user experience; I made the borders on hovers consistent, and changed the :active transition time to better suit the clicking action. In addition to that, I removed a few repetitions in the CSS, as well as moved all the icons inside pseudo-elements to reduce extraneous elements from teh HTML.
The guys at Pixify did an awesome job, and their download will be more than sufficient.
download this button set
These buttons will work fine in modern browsers, but will likely require image replacement / conditional styling for older browsers (IE8, IE7, IE6).
Feel free to use these buttons on your sites, and let me know if and where you do!
No Responses
rss feed