buttons.css | Creating Animated Bootstrap Buttons with CSS

buttons.css is a css  extension for the Bootstrap framework, it allow us to create animated bootstrap style buttons.

buttons.css - Creating Animated Bootstrap Buttons with CSS

AuthorLinksMade withLast update
ThemesfinityOffice HomeCSSOct 08, 2022

How to create animated bootstrap style buttons using buttons.css?

1.Import bootstrap stylesheet and buttons.css in your html page

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

2.Create different 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>

3.You also can use btn-outline-* class attribute to create outline 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>

Leave a Reply

Your email address will not be published. Required fields are marked *