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:
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>
The post Extend Bootstrap 4 Buttons With Extra Styles And Animations – css-buttons appeared first on CSS Script.