Buttons

---

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

---

Bootstrap Buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. Read more about them here .

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

---

Theme Square Buttons

Use .cl-btn-square-color-* class to make square filled buttons and .cl-btn-square-transparent-color-* to make transparent buttons, replace "*" with 1, 2, 3 or 4 to get the respective color.

NOTE: Buttons which are colored 2 and 3 are better fit for the dark background.

<button type="button" class="btn cl-btn-square-color-1">Button 1</button>
<div class="cl-dark d-inline-block py-1 px-2">
    <button type="button" class="btn cl-btn-square-color-2">Button 2</button>
    <button type="button" class="btn cl-btn-square-color-3">Button 3</button>
</div>
<button type="button" class="btn cl-btn-square-color-4">Button 4</button>

<button type="button" class="btn cl-btn-square-transparent-color-1">Button 1</button>
<div class="cl-dark d-inline-block py-1 px-2">
    <button type="button" class="btn cl-btn-square-transparent-color-2">Button 2</button>
    <button type="button" class="btn cl-btn-square-transparent-color-3">Button 3</button>
</div>
<button type="button" class="btn cl-btn-square-transparent-color-4">Button 4</button>

---

Theme Round Buttons

Use .cl-btn-round-color-* class to make round filled buttons and .cl-btn-round-transparent-color-* to make transparent buttons, replace "*" with 1, 2, 3 or 4 to get the respective color.

NOTE: Buttons which are colored 2 and 3 are better fit for the dark background.

<button type="button" class="btn cl-btn-round-color-1">Button 1</button>
<div class="cl-dark d-inline-block py-1 px-2">
    <button type="button" class="btn cl-btn-round-color-2">Button 2</button>
    <button type="button" class="btn cl-btn-round-color-3">Button 3</button>
</div>
<button type="button" class="btn cl-btn-round-color-4">Button 4</button>

<button type="button" class="btn cl-btn-round-transparent-color-1">Button 1</button>
<div class="cl-dark d-inline-block py-1 px-2">
    <button type="button" class="btn cl-btn-round-transparent-color-2">Button 2</button>
    <button type="button" class="btn cl-btn-round-transparent-color-3">Button 3</button>
</div>
<button type="button" class="btn cl-btn-round-transparent-color-4">Button 4</button>

---

Theme Primary Text Buttons

Use .cl-btn-primary-color-* class to make Primary Text buttons, replace "*" with 1, 2, 3 or 4 to get the respective color.

NOTE: Buttons which are colored 2 and 3 are better fit for the dark background.

<button type="button" class="btn cl-btn-primary-color-1">Button 1</button>
<div class="cl-dark d-inline-block py-3 px-2">
    <button type="button" class="btn cl-btn-primary-color-2">Button 2</button>
    <button type="button" class="btn cl-btn-primary-color-3">Button 3</button>
</div>
<button type="button" class="btn cl-btn-primary-color-4">Button 4</button>