Atmos
  • Getting Started
  • Build System
    • Gulp
      • Gulp 4
    • Page Structure
    • Sass Modules
  • UI Elements
    • Colors
    • Buttons
    • Icons
    • Cards
    • Alerts
    • Modals
    • Avatar
    • Tables
    • Mail Templates
  • forms
    • Form Layouts
    • Switch
    • Tag Input
    • Radio Box
    • Select2
    • Datepickers
    • Masked Input
    • Rangeslider
    • Dropzone Fileupload
    • Form Wizard
    • Form Validation
  • Charts
    • Charts
    • Apex Charts
    • Chartjs
    • Google Charts
    • Chartist
  • Maps
    • Google Maps
    • Vector Maps
  • Starter Template
    • blank template Markup
Powered by GitBook
On this page
  • Rounded Buttons
  • Button Badge
  • Rounded Circle Buttons
  1. UI Elements

Buttons

PreviousColorsNextIcons

Last updated 6 years ago

Buttons follow the same contextual classes as of bootstrap with additional modifiers.

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link ">Link</button>

Rounded Buttons

<button type="button" class="btn btn-primary btn-rounded ">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded ">Secondary</button>
<button type="button" class="btn btn-success btn-rounded ">Success</button>
<button type="button" class="btn btn-danger btn-rounded ">Danger</button>
<button type="button" class="btn btn-warning btn-rounded ">Warning</button>
<button type="button" class="btn btn-info btn-rounded ">Info</button>
<button type="button" class="btn btn-light btn-rounded ">Light</button>
<button type="button" class="btn btn-dark btn-rounded ">Dark</button>
<button type="button" class="btn btn-link  btn-rounded ">Link</button>

Button Badge

badges can be combined with buttons following is an example of badges with soft version of their color you can also use non soft color variation like badge-primary

<button type="button" class="btn badge badge-soft-primary ">Primary</button>
<button type="button" class="btn badge badge-soft-secondary ">Secondary</button>
<button type="button" class="btn badge badge-soft-success ">Success</button>
<button type="button" class="btn badge badge-soft-danger ">Danger</button>
<button type="button" class="btn badge badge-soft-warning ">Warning</button>
<button type="button" class="btn badge badge-soft-info ">Info</button>
<button type="button" class="btn badge badge-soft-light ">Light</button>
<button type="button" class="btn badge badge-soft-dark ">Dark</button>
<button type="button" class="btn badge badge-soft-link  ">Link</button>

Rounded Circle Buttons

<button type="button" class="btn btn-rounded-circle btn-primary ">Primary</button>
<button type="button" class="btn btn-rounded-circle btn-secondary ">Secondary</button>
<button type="button" class="btn btn-rounded-circle btn-success ">Success</button>
<button type="button" class="btn btn-rounded-circle btn-danger ">Danger</button>
<button type="button" class="btn btn-rounded-circle btn-warning ">Warning</button>
<button type="button" class="btn btn-rounded-circle btn-info ">Info</button>
<button type="button" class="btn btn-rounded-circle btn-light ">Light</button>
<button type="button" class="btn btn-rounded-circle btn-dark ">Dark</button>
<button type="button" class="btn btn-rounded-circle btn-link  ">Link</button>