Buttons are used everywhere in applications. Use the Rocket CSS buttons component to add navigation to your site.
Creating a Rocket CSS button is easy. Simply add a few classes to get started and modify your button. The .btn
class works on the following elements
<a>
anchor links.
<button>
elements, and form buttons.
<a href="#" class="btn btn-primary m-r-1">Anchor</a>
<button type="button" class="btn btn-primary">Button</button>
Change the colour of a button by adding one of the following classes:
.btn-primary
.btn-secondary
.btn-success
.btn-warning
.btn-danger
.btn-info
.btn-dark
.btn-light
.btn-black
.btn-white
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-black">Black</button>
<button type="button" class="btn btn-white">White</button>
You can create an outline button in a similar way to creating solid buttons, simply specify btn-outline-primary
or whichever colour you'd like to add:
.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-warning
.btn-outline-danger
.btn-outline-info
.btn-outline-dark
.btn-outline-light
.btn-outline-black
.btn-outline-white
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-black">Black</button>
<button type="button" class="btn btn-outline-white">White</button>
You can add a class for controlling the size of a button, simply add one of the following:
.btn-small
.btn-medium
.btn-large
<button type="button" class="btn btn-primary btn-small">Small</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-medium">Medium</button>
<button type="button" class="btn btn-primary btn-large">Large</button>
Rocket CSS comes with a class to make buttons rounded, simply add the followng:
.btn-rounded
<button type="button" class="btn btn-primary btn-rounded">Rounded</button>
To make a button take up the full width of a page, add the .btn-block
class:
.btn-block
<button type="button" class="btn btn-primary btn-block">Block Button</button>