Stylish Button & Button Group CSS Library Examples

Download This Plugin Back To CSSScript.Com

A CSS/SCSS library that provides an easy way to insert stylish and customizable buttons and button groups into your web project.

Base

Default Button Primary Button Secondary Button Outline Button Success Button Warning Button Error Button

<a href="#" class="btn" role="button">Default Button</a>
<a href="#" class="btn btn-primary" role="button">Primary Button</a>
<a href="#" class="btn btn-secondary" role="button">Secondary Button</a>
<a href="#" class="btn btn-outline" role="button">Outline Button</a>
<a href="#" class="btn btn-success" role="button">Success Button</a>
<a href="#" class="btn btn-warning" role="button">Warning Button</a>
<a href="#" class="btn btn-error" role="button">Error Button</a>

Size

Small Button Medium Button Large Button

<a href="#" class="btn btn-primary small" role="button">Small Button</a>
<a href="#" class="btn btn-primary" role="button">Medium Button</a>
<a href="#" class="btn btn-primary large" role="button">Large Button</a>

Disable

Default Primary Secondary Outline Success Warning Error

<a href="#" class="btn disabled" role="button" disabled>Default</a>

Loading

Loading Loading Loading Loading Loading Loading Loading

<a href="#" class="btn loading" role="button">Default Button</a>
<a href="#" class="btn btn-primary loading" role="button">Primary Button</a>
<a href="#" class="btn btn-secondary loading" role="button">Secondary Button</a>
<a href="#" class="btn btn-outline loading" role="button">Outline Button</a>
<a href="#" class="btn btn-success loading" role="button">Success Button</a>
<a href="#" class="btn btn-warning loading" role="button">Warning Button</a>
<a href="#" class="btn btn-error loading" role="button">Error Button</a>

Buttons with text and icon

Search Inbox Language Download Help

<a href="#" class="btn" role="button">><i class="fas fa-search"></i> Search</a>
<a href="#" class="btn" role="button"><i class="fas fa-inbox"></i> Inbox</a>
<a href="#" class="btn" role="button"><i class="fas fa-globe"></i> Language</a>
<a href="#" class="btn" role="button"><i class="fas fa-download"></i> Download</a>
<a href="#" class="btn" role="button"><i class="fas fa-question-circle"></i> Help</a>

Buttons icon only

<a href="#" class="btn" role="button"><i class="fas fa-search"></i></a>
<a href="#" class="btn" role="button"><i class="fas fa-inbox"></i></a>
<a href="#" class="btn" role="button"><i class="fas fa-globe"></i></a>
<a href="#" class="btn" role="button"><i class="fas fa-download"></i></a>
<a href="#" class="btn" role="button"><i class="fas fa-question-circle"></i></a>

Border Radius

No Radius Small Radius Medium Radius Large Radius

<a href="#" class="btn btn-primary radius-none" role="button">No Radius</a>
<a href="#" class="btn btn-primary radius-small" role="button">Small Radius</a>
<a href="#" class="btn btn-primary" role="button">Medium Radius</a>
<a href="#" class="btn btn-primary radius-large" role="button">Large Button</a>
<a href="#" class="btn btn-primary radius-circle" role="button">Circle Button</a>

Horizontal button group

Cut Copy Paste Delete

<div class="btn-group btn-group-horizontal">
    <a href="#" class="btn" role="button">Cut</a>
    <a href="#" class="btn btn-outline" role="button">Copy</a>
    <a href="#" class="btn btn-outline" role="button">Paste</a>
    <a href="#" class="btn btn-outline" role="button">Delete</a>
</div>

Horizontal button group icons only

<div class="btn-group btn-group-horizontal">
    <a href="#" class="btn" role="button"><i class="fas fa-cut"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-copy"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-paste"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-trash-alt"></i></a>
</div>

Vertical button group

Pounds Euro Dollars

<div class="btn-group btn-group-vertical">
    <a href="#" class="btn" role="button">Pounds</a>
    <a href="#" class="btn btn-outline" role="button">Euro</a>
    <a href="#" class="btn btn-outline" role="button">Dollars</a>
</div>

Vertical button group icons only

<div class="btn-group btn-group-vertical">
    <a href="#" class="btn" role="button"><i class="fas fa-pound-sign"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-euro-sign"></i></a>
    <a href="#" class="btn btn-outline" role="button"><i class="fas fa-dollar-sign"></i></a>
</div>