Docs

Learn button.css.


Introduction

What is button.css?

Button.css is CSS Library that can be use to style buttons. The difference between using pure CSS and using button.css is that this library is easier and quicker to use. Pure CSS requires you to do all the tedious work of styling while our library only requires you to apply a couple classes to style a button. If you aren't happy with the current options, you can also style your own buttons with less CSS code. The great thing about button.css is that it's open source, so the community can contribute to the project. This project is licensed under the MIT license. Alright, so now that that's out of the way, let's dive into the documentation.



Quick Start


Place this in the <head> section of your HTML file.

<link rel='stylesheet' href="https://realtechnerd.github.io/button.css/style.css"/>

CSS @import

You can place this in the main CSS file.

@import url(https://realtechnerd.github.io/button.css/style.css);


For faster load times, you can use the CDN

Place this in the <head> section of your HTML file.

<link href="https://cdn.jsdelivr.net/gh/realtechnerd/button.css@master/style.min.css" crossorigin="anonymous"/>

CSS @import

You can place this in the main CSS file.

@import url(https://cdn.jsdelivr.net/gh/realtechnerd/button.css@master/style.min.css);


Syntax

It's pretty easy.

Button.css' syntax is very simple.

<button class="class effect"></button>

Effects are optional, and the buttons will still work without effects. Order in which classes are written in do not matter as well. Example: I can write <button class="effect class"></button> and it will work perfectly.

You can also use <a>, Anchor tags with these classes.

<a class="class effect" href="#">A Link!</a>


The .b class

Create your own buttons with less CSS code.

A button using only the .b class will be rendered out like this:
It's an empty canvas, but includes the essentials such as padding and border-radius.

Variation 1

Using the class in a HTML tag.

Let's create a new class called .limeButton for a new button.

.limeButton {
    background-color: #bff542;
}

And let's add a :hover property.

.limeButton {
    background-color: #bff542;
}
.limeButton:hover {
    background-color: #b0fc00;
}

Now, to use my buttons, my code will be written like this:

<button class="b limeButton">Lime Button!</button>

As you can see, I have included the .b class as well.

My button will be rendered out like this:



Variation 2

Using the class with SASS.

If you're unfamiliar with SASS, it's an open-source CSS extension that adds more funtionality to CSS. You can write in SASS, and it will automatically compile to CSS.

To integrate the .b class in SASS, you can use the @extend property.

Our code will be written like this:

.limeButton {
    @extend .b;
    background-color: #bff542;
}
.limeButton:hover {
    background-color: #b0fc00;
}

Now, to use my buttons, my code will be written like this:

<button class="limeButton">Lime Button!</button>

Since I used the @extend property, I don't need to include the .b class in my HTML tags anymore. My button will still be rendered like this:



Button Classes

These are the main classes used in button.css buttons. Without these classes, styling won't work.


Regular Buttons

The default style of buttons.

<button class="bprimary">Primary</button>
<button class="bsecondary">Secondary</button>
<button class="bsuccess">Success</button>
<button class="bdanger">Danger</button>
<button class="bwarning">Warning</button>
<button class="binfo">Info</button>
<button class="blight">Light</button>
<button class="bdark">Dark</button>


Outlined Buttons

The default style of buttons, but now outlined and fill up on hover.

<button class="oprimary">Primary</button>
<button class="osecondary">Secondary</button>
<button class="osuccess">Success</button>
<button class="odanger">Danger</button>
<button class="owarning">Warning</button>
<button class="oinfo">Info</button>
<button class="olight">Light</button>
<button class="odark">Dark</button>


Push Buttons by Sritan Motati

Slightly resembles a real push button.

<button class="pbprimary">Primary</button>
<button class="pbsecondary">Secondary</button>
<button class="pbsuccess">Success</button>
<button class="pbdanger">Danger</button>
<button class="pbwarning">Warning</button>
<button class="pbinfo">Info</button>
<button class="pblight">Light</button>
<button class="pbdark">Dark</button>


Gradient Buttons

Regular buttons, but converted into their respected gradients.

<button class="lgbprimary">Primary</button>
<button class="lgbsecondary">Secondary</button>
<button class="lgbsuccess">Success</button>
<button class="lgbdanger">Danger</button>
<button class="lgbwarning">Warning</button>
<button class="lgbinfo">Info</button>
<button class="lgblight">Light</button>
<button class="lgbdark">Dark</button>


Outlined Gradient Buttons

Gradient buttons that are outlined, and fill up on hover.

<button class="olgprimary">Primary</button>
<button class="olgsecondary">Secondary</button>
<button class="olgsuccess">Success</button>
<button class="olgdanger">Danger</button>
<button class="olgwarning">Warning</button>
<button class="olginfo">Info</button>
<button class="olglight">Light</button>
<button class="olgdark">Dark</button>


Collection of Gradient Buttons

This collection will update with more buttons frequently, so check back later for more.

<button class="lgbpiggypink">Piggy Pink</button>
<button class="lgbmegatron">MegaTron</button>
<button class="lgbeveningsunshine">Evening Sunshine</button>
<button class="lgbendlessriver">Endless River</button>
<button class="lgblightocean">Light Ocean</button>
<button class="lgbyoda">Yoda</button>
<button class="lgbazurlane">Azur Lane</button>
<button class="lgbwitchinghour">Witching Hour</button>


Toggle Switches

These only work with <input type="checkbox">

Toggle Switches do require a bit more code than regular buttons. These toggle switches will work exactly like a checkbox though.

Syntax

<label class="switch">
    <input type="checkbox">
    <span class="className"></span>
</label>

The default class, .slider will work standalone.

<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>

<label class="switch">
    <input type="checkbox">
    <span class="sprimary"></span>
</label>

<label class="switch">
    <input type="checkbox">
    <span class="ssecondary"></span>
</label>

<label class="switch">
    <input type="checkbox">
    <span class="ssuccess"></span>
</label>

<label class="switch">
    <input type="checkbox">
    <span class="sdanger"></span>
</label>

<label class="switch">
    <input type="checkbox">
    <span class="swarning"></span>
</label>

<label class="switch">
    <input type="checkbox">
    <span class="sinfo"></span>
</label>

<label class="switch">
    <input type="checkbox">
    <span class="slight"></span>
</label>

<label class="switch">
    <input type="checkbox">
    <span class="sdark"></span>
</label>


Varun's Slurpee Combo!

Varun's custom button.

<button class="vbutton">Varun's Button</button>


Effect Classes

These are the effect classes used in button.css buttons. They're used to enhance buttons. Buttons will still work without these classes.


Scaling

Enlarges the button on hover and minimizes on click.

<button class="bprimary scale">Primary</button>
<button class="bsecondary scale">Secondary</button>
<button class="bsuccess scale">Success</button>
<button class="bdanger scale">Danger</button>
<button class="bwarning scale">Warning</button>
<button class="binfo scale">Info</button>
<button class="blight scale">Light</button>
<button class="bdark scale">Dark</button>


Sizing

Change the size of the buttons.

<button class="bprimary bxlg">Extra Large - .bxlg</button>
<button class="bprimary blg">Large - .blg</button>
<button class="bprimary">Regular - No extra class</button>
<button class="bprimary bsm">Small - .bsm</button>
<button class="bprimary bxsm">Extra Small - .bxsm</button>


Border Radius

Less Border Radius

<button class="bprimary lb">Primary</button>
<button class="bsecondary lb">Secondary</button>
<button class="bsuccess lb">Success</button>
<button class="bdanger lb">Danger</button>
<button class="bwarning lb">Warning</button>
<button class="binfo lb">Info</button>
<button class="blight lb">Light</button>
<button class="bdark lb">Dark</button>

Lesser Border Radius

<button class="bprimary lb1">Primary</button>
<button class="bsecondary lb1">Secondary</button>
<button class="bsuccess lb1">Success</button>
<button class="bdanger lb1">Danger</button>
<button class="bwarning lb1">Warning</button>
<button class="binfo lb1">Info</button>
<button class="blight lb1">Light</button>
<button class="bdark lb1">Dark</button>


Shadow Buttons

Add a shadow on your buttons

<button class="bprimary sha">Primary</button>
<button class="bsecondary sha">Secondary</button>
<button class="bsuccess sha">Success</button>
<button class="bdanger sha">Danger</button>
<button class="bwarning sha">Warning</button>
<button class="binfo sha">Info</button>
<button class="blight sha">Light</button>
<button class="bdark sha">Dark</button>

More Shadows

<button class="bprimary shalg">Primary</button>
<button class="bsecondary shalg">Secondary</button>
<button class="bsuccess shalg">Success</button>
<button class="bdanger shalg">Danger</button>
<button class="bwarning shalg">Warning</button>
<button class="binfo shalg">Info</button>
<button class="blight shalg">Light</button>
<button class="bdark shalg">Dark</button>

Less Shadows

<button class="bprimary shasm">Primary</button>
<button class="bsecondary shasm">Secondary</button>
<button class="bsuccess shasm">Success</button>
<button class="bdanger shasm">Danger</button>
<button class="bwarning shasm">Warning</button>
<button class="binfo shasm">Info</button>
<button class="blight shasm">Light</button>
<button class="bdark shasm">Dark</button>


Thank you for taking the time to read the documentation! You can also contribute to this project via the Github Repository.

Now go ahead and create great projects using this library!
Also, check out LitCSS, a CSS library that makes your CSS life easier.

Check out the Github Repository! Early Access Preview LitCSS