Sinuous Buttons Kit

Preview: http://demo.fwpolice.com/sinuousbuttons/

.:: Introduction ::.

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
• Responsive design
• Multiple colors, icons and sizes
• Amazingly low price
• Extended license available!


.:: Usability & Display ::.

The kit contains an easy to follow documentation. The highlight color, button sizes and other features are based on classes and span tags. For further information and documentation, please see the live demo.


.:: Extended License ::.

The simple license included by the Creative Group allows you to use this product for personal projects. Personal project means an item or a website that is only used by you. This item cannot be shared or sold on the web. However, as web designers, we want to use things on products that we wish to sell on the web. In this case, you can purchase an extended license by contacting us directly. The extended license follows the terms found on this page: http://demo.fwpolice.com/docs/. Additionally, these special conditions for this specific item apply:

1. The buttons can be used on templates that are sold on the web.
2. The buttons cannot be resold separately.
3. The buttons cannot be given out for free after purchase.
4. The buttons can only be used on one template that is being sold per license. For additional license, please contact us via e-mail address found in the downloadable archive after purchase.

ღ Bulk Pricing for Extended License ღ

1 - 4 additional license -- $10.00
5 - 9 additional license -- $ 9.00
10 - 14 additional license -- $ 8.00
15 - 19 additional license -- $ 7.00
20+ additional license -- $ 5.00

** The price is per license. 20 additional licenses costs $100.


.:: Support ::.

If you require any support, please post in the comment section or look in the “Thank You.pdf” file included in the archive.

.:: Updates ::.

*** Version 2.0 - (03/28/2013) ***
* The font has been updated to FontAwesome Version 2.0
* Update to icon classes
* Added metro buttons
* Fixed bug issues on transition

15 Comments

  1. jch02140
    • Purchased

    Is it possible to have multiple colors in a single button, or is it impossible due to the limitation of the CSS and HTML?...

  2. The Fireworks Police
    • Shop Owner

    @jch02140 Yes you can add simple gradients like that. Just create a class for the gradient and use that class color code instead of the standards provided.

    Sample:
    .sb_gradient:hover {
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
    }

    .sb-gradient:hover > span, .sb_gradient:hover > i { color: #000; }

  3. jch02140
    • Purchased

    Thanks for the reply. I got it working now. :D

    What about the multi-color text in a single button (as shown at the right of the sample image)?
    Though I guess may be that is a bit too difficult to achieve...

  4. jch02140
    • Purchased

    Do you mean something like this:

    (div class="span2")
    (a href="#" class="sb sb_blue") It's (span style="color: red;")Icon(span)
    (span style="color: green;")less(/span)
    (/a)
    (/div)

    Sorry about the syntax... Has to replace the arrow with bracket since the code somehow disappeared...

  5. jch02140
    • Purchased

    Nevermind, I think I have it figured out...
    Just wondering, is image icon supported? If not will it be implemented in the next version?

    Thanks again for this awesome product.

  6. The Fireworks Police
    • Shop Owner

    Hey sorry for the late reply. Glad to see you have figured out the issue. As for images, the idea behind this kit is to go completely image less. However, if you must, you can add an image using < img src="" alt="" /> before the text.

  7. The Fireworks Police
    • Shop Owner

    You can use bootstrap's button group class on it. But you will need to load the bootstrap css file.

    I plan on releasing Bootstrap Advanced, a tool kit that provides full customization to Bootstrap. It will include this kit in the source along with the slider customization and other cool things. But that wont be completed for some time (I may wait until they release Bootstrap 3).

You must be signed in to post a comment.