Created: 13 June 2010
Author: Saurabh Sharma
email: xconsau@gmail.com


Thank you for purchasing this pack. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. About silksun css3 buttons
  2. CSS files and structure
  3. How to use these buttons
  4. References and Credits

1. About silksun css3 buttons - top

silksun is a jumbo family pack of 4000+ unique CSS3 buttons. These buttons are available in seven silk color schemes, where each color scheme contains 599 unique buttons. These buttons differ from each other in terms of size, color, corner style and appearance style.

Technical details: These buttons are image-less and uses pure CSS3 code for rendering their appearance. Due to their dependency on CSS3, they will only work on modern browsers that completely support CSS3. This pack is tested on Mozilla Firefox 3.6 and Chrome 5.0.

2. CSS files and structure - top

For ease of modification and classification, I’ve separated CSS rules into 8 different files. They are:

Basic mandatory rules
style.css - This file is divided into three sections, as shown below:

style.css

Optional color schemes
This section contains 7 different color scheme files – yellow.css, green.css, blue.css, pink.css, purple.css, grey.css and black.css. Inside these files are the rules for a particular color scheme for a button. We will see in detail how to use these classes and rules to form your own button, in the next part.

3. How to use these buttons - top

Using these buttons inside your web page is quite easy. The simplest possible way is this:

In the above syntax, “button” class is mandatory. For size-specific classes and color-specific classes, you can view source code of HTML presentation files.

For example, on an anchor tag, the code may look like:

<a class="button m yellow-matte">Button Caption</a>

This creates a standard button of medium size with yellow-matte color style.

Similarly, for nested buttons, you can use:

<span class="button container-xl yellow-gloss">
<a class="button xl yellow-matte">extra large</a>
</span>

This creates a container with xtra-large size and yellow-gloss color. Inside that, a button with xl size and yellow matte color. Once you go through the source code, you will get a detailed idea on how these classes are used for various combinations.

Now you might be wondering why you should include 100kb files for just one button? No, you need not. Here is an alternate way:

This will be clearer from the example below:
Let’s say, you have decided to use purple button. You would go through purple.html to choose your favorite button:

choose and decide a button

The chosen button falls under the section “3. Two Corners - TopRight BottomLeft”.
Next, view the page source by pressing “Command + U” in Firefox. Or alternatively, you can open purple.html inside any text editor.
In the source code, press “Command + F” to open search dialog box. Inside search box, search for “3. Two Corners - TopRight BottomLeft”. You will see something like this:

searching a button in source code

Just after the search result, look for the sub-section in which the button resides. In our case, it is “3.2 Single Gloss”. Finally, you can see the button with “extra large” caption inside this sub-section. Next, copy the source HTML code of this button and paste it inside your web page, something like below:

<a href="#" class="button round-tr-bl-xl purple-gloss">extra large</a>


Optionally, you can use any HTML DOM element instead of <a>. i.e. you can also use this code as:

<span class="button round-tr-bl-xl purple-gloss">span tag</span>

<div class="button round-tr-bl-xl purple-gloss">div tag</div>

<input class="button round-tr-bl-xl purple-gloss" value="input tag" type="button" />

<button class="button round-tr-bl-xl purple-gloss">button tag</button>

<h2 class="button round-tr-bl-xl purple-gloss">h2 tag</h2>


Kindly note that this button is using three classes - "button round-tr-bl-xl yellow-gloss". You need to copy these classes inside your own CSS file:

Hence, your custom CSS would be reduced to 3kb from 100kb. The final pack contains this example inside "single button test" folder for your reference.

4. References and Credits - top

Although no external files are used in this pack. I would like to credit these resources for providing CSS3 information and syntax required to build these buttons.

https://developer.mozilla.org/
http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/ by Jeffrey Jordan Way.

 

Once again, thank you so much for purchasing this pack. As I said at the beginning, I'd be glad to help you if you have any questions relating to this pack. No guarantees, but I'll do my best to assist. If you have a more general question relating to CSS3 buttons on Code Canyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

silksun
© 2010 SaurabhSharma.