buttons.css is a css extension for the Bootstrap framework, it allow us to create animated bootstrap style buttons.
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>