Extend Bootstrap 4 Buttons With Extra Styles And Animations – css-buttons

Preview:

Description:

The css-buttons is a CSS extension for the Bootstrap 4 framework that adds extra CSS styles and animations to the Bootstrap buttons.

See also:

• More Bootstrap extensions
• Best Bootstrap 4 plugins

How to use it:

Download and load the CSS file buttons.css after Bootstrap’s stylesheet.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<link href="/path/to/buttons.css" rel="stylesheet">

Add border-radius to Bootstrap buttons.

<button type="button" class="btn btn-primary btn-lg btn-radius">Primary</button>
<button type="button" class="btn btn-secondary btn-lg btn-radius">Secondary</button>
<button type="button" class="btn btn-success btn-lg btn-radius">Success</button>
<button type="button" class="btn btn-danger btn-lg btn-radius">Danger</button>
<button type="button" class="btn btn-warning btn-lg btn-radius">Warning</button>
<button type="button" class="btn btn-info btn-lg btn-radius">Info</button>
<button type="button" class="btn btn-light btn-lg btn-radius">Light</button>
<button type="button" class="btn btn-dark btn-lg btn-radius">Dark</button>
<button type="button" class="btn btn-link btn-lg btn-radius">Link</button>

Add outlines to Bootstrap buttons.

<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-lg">Secondary</button>
<button type="button" class="btn btn-outline-success btn-lg">Success</button>
<button type="button" class="btn btn-outline-danger btn-lg">Danger</button>
<button type="button" class="btn btn-outline-warning btn-lg">Warning</button>
<button type="button" class="btn btn-outline-info btn-lg">Info</button>
<button type="button" class="btn btn-outline-light btn-lg">Light</button>
<button type="button" class="btn btn-outline-dark btn-lg">Dark</button>
<button type="button" class="btn btn-outline-link btn-lg">Link</button>