Created: 21/04/2011
By: ninetydegrees.co
Thank you for purchasing these buttons. 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!
The html structure for the buttons is very simple. To create a button with the default styling you would use the following code:
<a href="#" class="button" title="Link title">Button</a>
The next thing you might want to do is change the colour of the button. There are 16 different colour options including the default grey:
It's important to note these names as they are the names of the classes used to change the button colour. For example, if you wanted to make the button we created earlier red, you simply add the "red" class to the button, or if you wanted to make it the blue pastel colour you would add that class, like so:
<a href="#" class="button red" title="Link title">Button</a>
<a href="#" class="button blue-pastel" title="Link title">Button</a>
You can also change the weight/size of the buttons. In some instances you will want to use a slightly bigger button to grab attention, or a slightly smaller one where less prominence is desirable. To make a button bigger add the "heavy" class like so:
<a href="#" class="button heavy" title="Link title">Button</a>
To make a smaller button add the "light" class:
<a href="#" class="button light" title="Link title">Button</a>
All of the buttons have slightly rounded corners to improve general aesthetics but you also have the option of making them totally rounded. This is achieved by adding the "lozenge" class:
<a href="#" class="button lozenge" title="Link title">Button</a>
You can also make the buttons animate using the webkit css3 transition property. Buttons with the "scale" class will increase in size by 10% on hover in a smooth animation. To animate a button add the "scale" class:
<a href="#" class="button scale" title="Link title">Button</a>
Finally you can create effective 3D "chunky" buttons using the "chunky" class:
<a href="#" class="button chunky" title="Link title">Button</a>
These classes can be combined and stacked in any way you see fit to achieve the button style you desire. For example if you wanted a blue button, which container text larger than your specified body copy, had totally rounded corners and animated on hover you would use the following code:
<a href="#" class="button blue heavy lozenge scale" title="Link title">Button</a>
Buttons are great on their own but to really improve the user experience this particular button set allows you to add icons to your buttons.
The markup for a button with an icon is a little different and includes the addition of a span tag. When creating a button with an icon use the following markup:
<a href="#" class="button icon" title="Link title"><span>Button</span></a>
There are 22 different icons you can then apply to the button:
These classes can be applied to a button individually to add it's corresponding icon. Again, these classes can be stacked with the aforementioned style. For example, if you wanted to create a green button with totally rounded corners and a download icon you would use the following code:
<a href="#" class="button icon download lozenge green" title="Link title"><span>Button</span></a>
There are 2 CSS files included with this button set but you should only actually use one of them.
The icons in this button set are from the "Iconic" icon set.
Once again, thank you so much for purchasing this button set. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.