- 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, Ecommerce, Email, Fashion, Gallery, Image, Iphone, Jquery, Landing, Magazine, Magento, Marketing, Minimal, Mobile, Modern, Multi, Multipurpose, Online, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest Module A Minimalist Photography WordPress Theme 19716683
- ThemeForest Cizarua Responsive One Page Portfolio Theme 19692781
- ThemeForest Bekas Responsive WordPress Blog Theme 19680464
- ThemeForest Spin Multipurpose Responsive One page HTML Template 19757452
- ThemeForest Cloudio Hosting Instapage Template 19758859
- ThemeForest Reality Pro Real Estate Responsive Template 19719211
- ThemeForest Let's Play Hockey School & Sport Theme 19638415
- ThemeForest Lutty Personal Blog PSD Template 19670984
- ThemeForest Bizmate One page Portfolio Template 19744099
- ThemeForest Moti App Responsive Landing Page 19751641