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

<a class="btn primary" href="">primary</a>

Rounded Buttons

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

<a class="btn primary rounded" href="">primary</a>

Outline Buttons

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

<a class="btn primary outline" href="">primary</a>

Outline Rounded Buttons

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

<a class="btn primary outline rounded" href="">primary</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>

Button Dropdown

To Create a Button Dropdown checkout the example below

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

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

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!!

Support Butter Cake 😃

Monthly donation

Patreon

One Time donation

Page Content