Just add the Sexy Buttons CSS stylesheet to the page's <head> section:
Don't forget to adjust the stylesheet path as necessary.
Sexy Buttons can be created using either <a> or <button> elements by adding class="sexybutton" and wrapping the text in double <span>s:
This is a Sexy Button wouldn't you agree? (Click it to view the hover and active states...)
The buttons dynamically expand to fit their text: Click this button right now!
Sexy Buttons can include icons by adding an additional <span> with a class attribute identifying the icon:
Although the entire set of 1000 icons from the Silk Icons set and the 450+ Silk Companion 1 Icons set is included with Sexy Buttons, only the icons shown above are defined in the stylesheet. If you want to use any of the other icons, you will need to define classes for them first in the CSS file. (If I missed any general purpose icons, let me know and I'll add them to the framework.)
Here is a list of all the predefined icon classes:
ok, cancel, add, delete, download, download2, upload, search, find, first, prev, next, last, play, pause, rewind, forward, stop, reload, sync, save, email, print, heart, like, dislike, accept, decline, home, help, info, cut, copy, paste, erase, undo, redo, edit, calendar, user, settings, wrench, cart, wand
Alternatively, you can embeded the icon directly in the HTML instead of using an extra <span>:
Note the use of the "after" class for icons that appear after the text label.
Buttons with only an icon (i.e. no text label) can be created by adding the class sexyicononly:
There are three button sizes: normal, medium, and large. Changing sizes is also as easy as adding the class sexymedium or sexylarge:
Normal Button Medium Button Large Button
Changing skins is as easy as adding a class attribute to specify the skin:
The images/skins/ButtonTemplate.psd file can be used to assist in creating new skins.
There is an alternative skin called sexysimple that offers an unlimited number of color variations without requiring individual skin images. It uses advanded CSS3 properties that are supported in most modern browsers to create an effective and beautiful "button" effect. Even in browers that don't support these advanced CSS properties (yes, I'm talking about you, Internet Explorer), the buttons degrade nicely and remain fully functional. Since the buttons don't use skin images, they don't need the double nested <span> elements, but still use a <span> for icon selection.
Again, color selection is done via a class attribute:
The following color variations are predefined: (but more can easily be defined)
sexyblack (default), sexyteal, sexymagenta, sexyred, sexyorange, sexygreen, sexyblue, sexypurple, sexyyellow
Sizes are also specified in the usual manner:
The simple skin buttons support the following size classes:
sexysmall, sexymedium (default), sexylarge, sexyxl, sexyxxl, sexyxxxl
Sexy Buttons support four states:
Since IE6 doesn't allow you to directly style disabled buttons, you should add a 'disabled' class to disabled elements.
Sexy Buttons has been tested and is supported in the following browsers:
Only those browsers and versions that have been tested are included above. It very well may work in other browsers or versions not listed.
Do you really like Sexy Buttons? Have they saved you a lot of time or really benefited a project you're working on? If so, please consider supporting the project by making a donation. Thank you!
Questions? Comments? I welcome your feedback:
Sexy Buttons was inspired and derived from the excellent work done by these fine folks: