Buttons

Buttons are used everywhere in applications. Use the Rocket CSS buttons component to add navigation to your site.

Basics#

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.
Anchor 

  <a href="#" class="btn btn-primary m-r-1">Anchor</a>

  <button type="button" class="btn btn-primary">Button</button>

Colours#

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>

Outline#

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>

Sizes#

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>

Rounded#

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>

Block 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>