buttons

Intro

You can use Butter Cake's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

You can remove border radius from buttons, cards etc... by setting sass variable $radius: false Find the variable inside vars/variables.scss or use .radius-none class.

To turn any html tag into button just add .btn .(color), more colors available,
Only add .btn class, if you don't want a background color, check the examples below

Also can add .active class to any button to show active state.

Butter Cake includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Regular Buttons

primary secondary gray success info warning danger dark light white 
<a class="btn primary" href="">primary</a>

Rounded Buttons

Just add .rounded class to a button to get curved shape button.

primary secondary gray success warning danger dark light white 
<a class="btn primary rounded" href="">primary</a>

Outline Buttons

Just add .outline class to a button to remove background color button.

primary secondary gray success warning danger dark light white 
<a class="btn primary outline" href="">primary</a>

Outline Rounded Buttons

Just add .outline and .rounded class to a button.

primary secondary gray success warning danger dark light white 
<a class="btn primary outline rounded" href="">primary</a>

Loading Buttons

Just add .btn-loading class to a button.

primary secondary gray success warning danger dark light white 
<a class="btn primary" href="#!">
    primary
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn secondary" href="#!">
    secondary
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn gray" href="#!">
    gray
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn success" href="#!">
    success
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn warning outline rounded" href="#!">
    warning
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn danger outline rounded" href="#!">
    danger
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn dark outline rounded" href="#!">
    dark
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn light outline rounded" href="#!">
    light
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn white outline rounded" href="#!">
    white
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
primary secondary gray success warning danger dark light white 
<a class="btn primary btn-loading" href="#!">
    primary
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn secondary btn-loading" href="#!">
    secondary
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn gray btn-loading" href="#!">
    gray
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn success btn-loading" href="#!">
    success
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn warning btn-loading" href="#!">
    warning
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn danger btn-loading" href="#!">
    danger
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn dark btn-loading" href="#!">
    dark
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn light btn-loading" href="#!">
    light
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>
<a class="btn white btn-loading" href="#!">
    white
    <span class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></span>
</a>

Button Group

Group a series of buttons together on a single line with the button group

Wrap a series of buttons with .btn-group. 

<div class="btn-group">
    <button class="btn primary active">1</button>
    <button class="btn primary">2</button>
    <button class="btn primary">3</button>
    <button class="btn primary">4</button>
</div>

<div class="btn-group stacked-group">
    <button class="btn primary">primary</button>
    <button class="btn secondary">secondary</button>
    <button class="btn success">success</button>
    <button class="btn warning">warning</button>
</div>

Button Dropdown

To Create a Button Dropdown checkout the example below

Drop Down

Checkout Dropdown Page for more

<div class="dropdown btn primary">
    <div>Drop Down</div>

    <ul class="dropdown-menu">
        <li><a href="#!">Link 2</a></li>
        <li><a href="#!">Link 3</a></li>
        <li><a href="#!">Link 4</a></li>
    </ul>
</div>

Button Sizes

Need larger or smaller buttons? Just add .btn-lg or .btn-sm for additional sizes.

Large Button

Large Button Large Button 
<a class="btn primary btn lg" href="#!">Large Button</a>

Small Button

Small Button Small Button 
<a class="btn primary btn sm" href="#!">Small Button</a>

Block Level Buttons

To Create block level buttons just .block button will take the full width of the parent element 

<button class="btn primary block">Block Level Button</button>
<button class="btn secondary block">Block Level Button</button>
You can use any tag, in this sample I have used button tag

Active state

Make buttons look active by adding the .active class.

<button class="btn primary active">Active Button</button>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any element.

<button class="btn primary" disabled>Disabled Button</button>

Extra Info

The .btn .(*) classes are designed to be used with the button , a tags element. However, you can also use these classes on a or input or any other elements (though some browsers may apply a slightly different rendering).

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

© 2018 - 2019 Butter Cake, All rights reserved.
Currently v3.0 Code licensed MIT, docs CC BY 3.0.
Page Content