Chankya
  • Introduction
  • Getting Started
  • Start Building
  • Layouts
  • Seed Project
  • Style Customisation
  • Third Party Modules
  • UI Elements
    • Buttons
    • Progress Bar
    • Tabs
    • Accordions
    • Pagination
    • Tooltip
    • Cards
    • Social Icons
    • Typography
    • Drop down
    • Alerts
    • Carousel
    • Date picker
    • Slider
  • Components
    • List
    • Grid
  • Contact Us
    • Hire Us
  • Changelog
Powered by GitBook
On this page

Was this helpful?

  1. UI Elements

Buttons

Button styles can be applied to any element with the .btn class applied. Basically, you'll want to apply these to only <a> and <button>, <input> elements.

Buttons are the primary elements provided by bootstrap which are modified by extending the bootstrap variables to make them as per theme. Chankya provided two types of variants for buttons solid and outline you see following style.

//--- Solid Button Varients ---//
<button class="btn btn-primary mr-1 mb-1" type="button">.btn-primary</button>
<button class="btn btn-secondary mr-1 mb-1" type="button">.btn-secondary</button>
<button class="btn btn-success mr-1 mb-1" type="button">.btn-sucess</button>
<button class="btn btn-info mr-1 mb-1" type="button">.btn-info</button>
<button class="btn btn-warning mr-1 mb-1" type="button">.btn-warning</button>
<button class="btn btn-danger mr-1 mb-1" type="button">.btn-danger</button>
<button class="btn btn-link mr-1 mb-1" type="button">.btn-link</button>
 
//--- Outline Button Varients ---//
<button class="btn btn-outline-primary mr-1 mb-1" type="button">.btn-primary</button>
<button class="btn btn-outline-secondary mr-1 mb-1" type="button">.btn-secondary</button>
<button class="btn btn-outline-success mr-1 mb-1" type="button">.btn-sucess</button>
<button class="btn btn-outline-info mr-1 mb-1" type="button">.btn-info</button>
<button class="btn btn-outline-warning mr-1 mb-1" type="button">.btn-warning</button>
<button class="btn btn-outline-danger mr-1 mb-1" type="button">.btn-danger</button>
<button class="btn btn-link mr-1 mb-1" type="button">.btn-link</button>

PreviousUI ElementsNextProgress Bar

Last updated 6 years ago

Was this helpful?