About Butns

Butns is an advanced buttons library for your website, using a set of pre defined classes you can fully customize your button and step up your website's design.


Demo

Check out all of the buttons you can create with Butns

Note: White buttons may not appear because of the background colour matching it

Note: There are no whitish white or gray colours


Available Colours

Note: More colours will be introduced in updated versions

Available Options

Note: you could add more than one option to a single button!


Available Types

fill-purple

Button

fill-dark-purple

Button

fill-whitish-purple

Button

border-purple

Button

border-dark-purple

Button

border-whitish-purple

Button

gradient-purple

Button

Usage

Check this guide to get started using Butns!

We will use the purple colour for this guide but it works with every colour available

If you are stuck, feel free to copy the code below, if it doesn't work as intended, check that you have butns.css or butns.min.css linked in your html

Link The butns.css or butns.min.css file to your html

<link href="path/to/butns.css" rel="stylesheet">

Fill Style


Button

<a href="#" class="button fill-purple">Button</a>

Dark Fill Style


Button

<a href="#" class="button fill-dark-purple">Button</a>

Whitish Fill Style


Button

<a href="#" class="button fill-whitish-purple">Button</a>

Border Style


Button

<a href="#" class="button border-purple">Button</a>

Dark Border Style


Button

<a href="#" class="button border-dark-purple">Button</a>

Whitish Border Style


Button

<a href="#" class="button border-whitish-purple">Button</a>

Transition Option


Button

<a href="#" class="button border-purple transition">Button</a>

Semi Transparent Option


Button

<a href="#" class="button border-purple semi-transparent">Button</a>

Rounded Option


Button

<a href="#" class="button border-purple rounded">Button</a>

Medium Option


Button

<a href="#" class="button border-purple medium">Button</a>

Large Option


Button

<a href="#" class="button border-purple large">Button</a>

Small Option


Button

<a href="#" class="button border-purple small">Button</a>

Chaining Options


Button

<a href="#" class="button border-purple medium rounded">Button</a>

Gradient Style


Button

<a href="#" class="button gradient-purple">Button</a>


License

Butns is Licensed under The MIT License

Copyright (c) 2016 Ahmed Tarek