- Site Template
- WordPress Theme
- Blogging Theme
- CMS Theme
- Marketing Template
- eCommerce Theme
- Forum Theme
- Flash Template
- PSD Web Template
- .NET Script
- PHP Script
- HTML5 Code
- CSS Style
- Edge Animate Template
- Muse Template
- TypeEngine Theme
- Static Site Generator
- Sketch Template
CodeCanyon Sinuous Buttons Kit 3442618
CSS Style \ Button
Responsive \ Imageless \ Buttons
CSS Style - Sinuous Buttons Kit 3442618 by IamShipon1988 @ CodeCanyon
CSS Style \ Button
Last Update: 29 November 12; Compatible Browsers: IE8, IE9, Firefox 4, Safari 4, Safari 5, Opera, Chrome; Software Version: CSS3; High Resolution: No; Files Included: HTML, CSS.
Simple Buttons is a kit packed with clean and easy-to-use buttons that you can use on any website. The kit comes pre-loaded with the wonderful Font Awesome font. By adding a class property to your a tag, you can convert any link to a functioning button. Best of all, the kit is created with classes that will not interfere with your overall website style, yet at the same time, easy to remember. The key features of this buttons are.
- Coded in CSS3
- Contains no images
- Uses the beautiful Font Awesome font
- Responsive design
- Multiple colors, icons and sizes
- Amazingly low price
- Extended license available!
NOW INCLUDES METRO BUTTONS !
Usability & Display
Simple buttons is named that for a reason; it is easy to use. To convert any link to a button, all you need
to do is add the sb class to the a tag. So if you have a simple link such
<a href="http://codecanyon.net/item/sinuous-buttons-kit/#">An Awesome Link</a>
Now just add class=”sb” like so.
<a href="http://codecanyon.net/item/sinuous-buttons-kit/#" <strong>class="sb"</strong>>An Awesome Link</a>
The bold text and color highlight is controlled by span tag. If you have a particular word you want
to emphasize, simply surround the word with <span> tag. Furthermore, the kit comes with
multiple highlight colors. You can add a highlight color by adding sb_[color] inside
the class callout in a . It would look like this.
<a href="http://codecanyon.net/item/sinuous-buttons-kit/#" class="sb <strong>sb_darkorange</strong>">An <strong><span>Awesome</span></strong> Link</a>
If you want to add an icon in front of your button, you can do so by using the <i> tag. The icon
can be placed anywhere you like. However, it is strongly recommended to use it before any text.
<a href="http://codecanyon.net/item/sinuous-buttons-kit/#" class="sb sb_darkorange"><strong><i class="icon-link"></i></strong>An <span>Awesome</span> Link</a>
By default, all buttons will display block. If you would like to display a button inline-block instead, simply
add the class inline-block to the class property in the a tag like so.
<a href="http://codecanyon.net/item/sinuous-buttons-kit/#" class="sb sb_darkorange <strong>inline-block</strong>"><i class="icon-link"></i>An <span>Awesome</span> Link</a>
Similarly, you can also set the button to be in active state by default. Simply add the class active
or current to the class property in the a tag like so.
<a href="http://codecanyon.net/item/sinuous-buttons-kit/#" class="sb sb_darkorange inline-block <strong>active</strong>"><i class="icon-link"></i>An <span>Awesome</span> Link</a>
To change the size of the button, you will need to adjust the font-size of the button itself. Don’t worry,
you don’t need to do any CSS coding for this. We included a series of different font-size for you to use.
The button size, the icon size and the font will all change in accorance with this simple change. To change
the font-size, all you need to do is add the class to your a tag like so.
<a href="http://codecanyon.net/item/sinuous-buttons-kit/#" class="sb sb_darkorange inline-block active <strong>font-size-25</strong>"><i class="icon-link"></i>An <span>Awesome</span> Link</a>
This kit uses the beautiful FontAwesome font. The font comes with its own terms that states.
The Font Awesome webfont, CSS , and LESS files are licensed under CC BY 3 .0. A mention of Font Awesome – http://fortawesome.github.com/Font-Awesome in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an ‘About’ or ‘Credits’ screen is considered acceptable (most common in desktop or mobile software).
If you require any support, please post in the comment section or look in the “Thank You.pdf” file included in the archive.
Version 2.0 – (11/28/2012)
- The font has been updated to FontAwesome Version 2.0
- Update to icon classes
- Added metro buttons
- Fixed bug issues on transition
Social Sprites Icons Widget; Sinuous Buttons Kit.
Keywords: buttons, css, imageless, kit, responsive.
Android, Builder, Business, Clean, Corporate, Creative, Design, Email, Fashion, Gallery, Image, Iphone, Jquery, Landing, Magazine, Magento, Marketing, Minimal, Mobile, Modern, Multi, Multipurpose, Online, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Retina, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest Topp Responsive Email Template & Mailchimp & Campaign Monitor & Stampready Builder 19322205
- ThemeForest GrandPack Email Template & Online Emailbuilder 2.1 19321191
- ThemeForest MAXON Multipurpose HTML Template 19310834
- ThemeForest PUNDIT Personal Portfolio Template 19288409
- ThemeForest Shopy Multipurpose Responsive Opencart Theme 19314078
- ThemeForest Lovely Cosmetics Responsive HTML Template 19257676
- ThemeForest Rx-Resume Responsive Resume Template 19254388
- ThemeForest The Future Multi-Purpose PSD Template 18777752
- ThemeForest Jollyque Onepage Portfolio HTML5 Website Template 19111725
- ThemeForest SuperFine Multi-Purpose Drupal Commerce Theme 19294770