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 insidevars/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.
Loading Buttons
Just add .btn-loading
class to a button.
<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>
<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
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>
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 thebutton , a tags
element. However, you can also use these classes ona
orinput
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!!