Usage and Installation

Getting ready to install and use CSS Buttons is extremely easy. In fact, the main goal is for designers and developers to quickly implement these buttons on already existing web sites with minimal effort.

As the CSS Buttons project develops, new and better techniques will allow greater customization within the different working environments. Hopefully, the community will begin to submit new ideas that can further develop the CSS Buttons Framework.

The current release (Beta .33) will depend on the Framework + Skin model. This model allows easy default installations as well as customizable fonts, colors, and paddings.

This is what a typical setup would look like:

<link href="cssbuttons/cssbuttons.css" rel="stylesheet" type="text/css">
<link href="cssbuttons/skins/sample/sample.css" rel="stylesheet" type="text/css">
<!--[if lte IE 7]>
<style type="text/css" media="all">
@import url("cssbuttons/ieBrowserHacks.css");
</style>
<![endif]-->

The basic steps to enable CSS Buttons are as follows:

  1. Include the CSS Buttons Framework
  2. Include the Button Skins of your choice
  3. Include the IE Browser Hacks
  4. Style the buttons using the Element Setup

CSS Buttons Framework

The magic of the CSS Buttons is located in this style sheet. Read more.

<link href="cssbuttons/cssbuttons.css" rel="stylesheet" type="text/css" media="all" />

Button Skins

The button skins allow extreme customization on the look and feel of your buttons. To include a pre-designed skin pack, simply link the css in the following structure... skins / name_of_skin / name_of_skin.css

<link href="cssbuttons/skins/sample/sample.css" rel="stylesheet" type="text/css" media="all" />

IE Browser Hacks

The following conditional code is needed for IE hacks to be included

<!--[if lte IE 7]>  
<style type="text/css" media="all">
@import url("cssbuttons/ieBrowserHacks");
</style>
<![endif]-->

Element Setup

In order for the elements to be properly displayed, they have to be setup in a particular way. Until "CSS3" specifications for multiple backgrounds is widely adopted, we'll need to accommodate for each element (differently). The basic naming convention is: class=" framework + skin name + skin style"

Link Elements

<a href="#" class="cssbutton sample orange"><span>Search</span></a>
Link Element Setup

Button Elements

<button class="cssbutton sample orange"><span>Search</span></button>
Button Element Setup

Input Elements

<div class="cssbutton sample orange">
	<input type="submit" value="Search">
</div>
Input Element Setup

Getting Started

Downloads

Button Skins

About CSS Buttons