Default Style

  • 3
    Notifications
    • user

      Emay Walter liked your post

      10 minutes ago
    • user

      Allie Gratershared your post

      5 hours ago
    • user

      Colin Sikcommented on your post

      yesterday
    • Check all
  • 2
    user
    Jane Cooper

    active

    • user

      Hello.how are you?

    • user

      Hi, i'm fine.what about you?

    • user

      I am facing js issue can you help me?

    • user

      Sure, i will help you.

  • 2
    Cart
    empty
    Oops! Your cart empty!!!
  • profile

    Wade Warren

    UI Designer
user

Wade Warren

UI Designer

Square Buttons

Used.btn-square class to square button.

<!-- Code Box Copy begin -->
<button class="btn btn-square btn-primary">Primary Button</button>
<button class="btn btn-square btn-secondary">Secondary Button</button>
<button class="btn btn-square btn-success">Success Button</button>
<button class="btn btn-square btn-info">Info Button</button>
<button class="btn btn-square btn-warning">Warning Button</button>
<button class="btn btn-square btn-danger">Danger Button</button>
<button class="btn btn-square btn-light">Light Button</button>
<!-- Code Box Copy end -->

Default Buttons

Use the.btn class for set default buttons and set background color like this : .bg-* [primary/secondary..]. 

<button class="btn btn-primary" type="button" data-bs-toggle="tooltip" title="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" title="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success" type="button" data-bs-toggle="tooltip" title="btn btn-success">Success Button</button>
<button class="btn btn-info" type="button" data-bs-toggle="tooltip" title="btn btn-info">Info Button</button>
<button class="btn btn-warning" type="button" data-bs-toggle="tooltip" title="btn btn-warning">Warning Button</button>
<button class="btn btn-danger" type="button" data-bs-toggle="tooltip" title="btn btn-danger">Danger Button</button>
<button class="btn btn-light" type="button" data-bs-toggle="tooltip" title="btn btn-light">Light Button</button>

Button Sizes

Use the .btn-lg,.btn-sm,.btn-xs for sizes of buttons

<button class="btn btn-light-primary btn-lg b-r-8">Large button</button>
<button class="btn btn-light-secondary b-r-8">Default button</button>
<button class="btn btn-light-warning btn-sm b-r-8">Small button </button>
<button class="btn btn-light-success btn-xs b-r-6">Extra small button</button>

Outline Button Sizes

Use the .btn-lg,.btn-sm,.btn-xs for sizes of buttons

<!-- Cod Box Copy begin -->
<button class="btn btn-outline-primary btn-lg b-r-8">Large button</button>
<button class="btn btn-outline-secondary b-r-8">Default button</button>
<button class="btn btn-outline-warning btn-sm b-r-8">Small button </button>
<button class="btn btn-outline-success btn-xs b-r-6">Extra small button</button>
<!-- Cod Box Copy end -->

Rounded Buttons

Add .btn-pill class for rounded buttons.

<!-- Cod Box Copy begin -->
<button class="btn btn-pill btn-light-primary">Contacts </button>
<button class="btn btn-pill btn-light-secondary">Users</button>
<button class="btn btn-pill btn-light-success">Chats</button>
<button class="btn btn-pill btn-light-info">Animation</button>
<button class="btn btn-pill btn-light-warning">Widgets</button>
<button class="btn btn-pill btn-light-danger">Project</button>
<button class="btn btn-pill btn-light-light">Icons</button> 
<!-- Cod Box Copy end -->

Outline Rounded Buttons

Add .btn-pill and .btn-outline-* class for outline with buttons. 
<!-- Cod Box Copy begin -->
<button class="btn btn-pill btn-outline-primary">Contacts </button>
<button class="btn btn-pill btn-outline-secondary">Users</button>
<button class="btn btn-pill btn-outline-success">Chats</button>
<button class="btn btn-pill btn-outline-info">Animation</button>
<button class="btn btn-pill btn-outline-warning">Widgets</button>
<button class="btn btn-pill btn-outline-danger">Project</button>
<button class="btn btn-pill btn-outline-light">Icons</button>
<!-- Cod Box Copy end -->

Rounded Sizes

Use the .btn-lg,.btn-sm,.btn-xs for sizes of buttons

<!-- Cod Box Copy begin -->
<button class="btn btn-pill btn-primary btn-lg">Large button</button>
<button class="btn btn-pill btn-secondary">Default button</button>
<button class="btn btn-pill btn-warning btn-sm">Small button </button>
<button class="btn btn-pill btn-success btn-xs">Extra small button</button>
<!-- Cod Box Copy end -->

Outline Rounded Sizes

Use the .btn-lg,.btn-sm,.btn-xs for sizes of buttons

<!-- Cod Box Copy begin -->
<button class="btn btn-pill btn-outline-primary btn-lg">Large button</button>
<button class="btn btn-pill btn-outline-secondary">Default button</button>
<button class="btn btn-pill btn-outline-warning btn-sm">Small button </button>
<button class="btn btn-pill btn-outline-success btn-xs">Extra small button</button>
<!-- Cod Box Copy end -->

Disabled Buttons

Add .disabled class or disabled="disabled" attribute for disabled button

<!-- Cod Box Copy begin -->
<button class="btn btn-primary disabled" type="button">I'm disabled</button>
<button class="btn btn-pill btn-warning disabled" type="button">Having problems</button>
<button class="btn btn-outline-primary disabled" type="button">Inaccessible</button>
<button class="btn btn-pill btn-outline-warning disabled" type="button">Disabled</button>
<!-- Cod Box Copy end -->

Icons Buttons

Used all variation of icons. like this : .btn-square/.btn-pill.

<!-- Cod Box Copy begin -->
<button class="btn b-ln-height btn-primary btn-square"><i data-feather="help-circle"></i></button>
<button class="btn b-ln-height btn-secondary btn-square"><i data-feather="clock"></i></button>
<button class="btn b-ln-height btn-warning"><i data-feather="loader"></i></button>
<button class="btn b-ln-height btn-light-primary"><i data-feather="radio"></i></button>
<button class="btn-pill btn-light-secondary"><i data-feather="loader"></i></button>
<button class="btn-pill btn-light-warning"><i data-feather="radio"></i></button>
<button class="btn b-ln-height btn-outline-primary"><i data-feather="radio"></i></button>
<button class="btn-pill btn-outline-secondary border border-secondary"><i data-feather="loader"></i></button>
<button class="btn-pill btn-outline-warning border border-warning"><i data-feather="radio"></i></button>
<!-- Cod Box Copy end -->

Button Group

Wrap a series of buttons with .btn in .btn-group . & custom class used for sizes: .btn-lg / .btn-sm .

Button group variation
Outline button group
Button group sizes
<!-- Cod Box Copy begin -->
<div class="row g-3">
<div class="col-4">
<div class="card-wrapper border rounded-3">
<h6 class="sub-title fw-bold">Button group variation</h6>
<div class="button-wrapper">
<div class="btn-group btn-group-square" role="group" aria-label="Basic example">
<button class="btn btn-primary" type="button">Left</button>
<button class="btn btn-light-primary" type="button">Middle</button>
<button class="btn btn-primary" type="button">Right</button>
</div>
<div class="btn-group btn-group-pill" role="group" aria-label="Basic example">
<button class="btn btn-light-primary" type="button">Left</button>
<button class="btn btn-primary" type="button">Middle</button>
<button class="btn btn-light-primary" type="button">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button class="btn btn-primary" type="button">Left</button>
<button class="btn btn-light-primary" type="button">Middle</button>
<button class="btn btn-primary" type="button">Right</button>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card-wrapper border rounded-3">
<h6 class="sub-title fw-bold">Outline button group</h6>
<div class="button-wrapper">
<div class="btn-group btn-group-square" role="group" aria-label="Basic outlined example">
<button class="btn btn-outline-primary" type="button"><i data-feather="arrow-left"></i></button>
<button class="btn btn-outline-primary" type="button"><i data-feather="arrow-up"></i></button>
<button class="btn btn-outline-primary" type="button"><i data-feather="arrow-right"></i></button>
</div>
<div class="btn-group btn-group-pill" role="group" aria-label="Basic outlined example">
<button class="btn btn-outline-primary" type="button"> <i data-feather="arrow-left-circle"></i></button>
<button class="btn btn-outline-primary" type="button"><i data-feather="arrow-up-circle"></i></button>
<button class="btn btn-outline-primary" type="button"><i data-feather="arrow-right-circle"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button class="btn btn-outline-primary" type="button"> <i data-feather="align-left"></i></button>
<button class="btn btn-outline-primary" type="button"><i data-feather="align-center"></i></button>
<button class="btn btn-outline-primary" type="button"><i data-feather="align-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card-wrapper border rounded-3">
<h6 class="sub-title fw-bold">Button group sizes</h6>
<div class="button-wrapper">
<div class="btn-group" role="group" aria-label="Large button group">
<button class="btn btn-outline-primary btn-lg" type="button">Left</button>
<button class="btn btn-outline-primary btn-lg" type="button">Middle</button>
<button class="btn btn-outline-primary btn-lg" type="button">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group">
<button class="btn btn-outline-primary" type="button">Left</button>
<button class="btn btn-outline-primary" type="button">Middle</button>
<button class="btn btn-outline-primary" type="button">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Small button group">
<button class="btn btn-outline-primary btn-sm" type="button">Left</button>
<button class="btn btn-outline-primary btn-sm" type="button">Middle</button>
<button class="btn btn-outline-primary btn-sm" type="button">Right</button>
</div>
<!-- Cod Box Copy end -->

Block Level Buttons

.btn class used for buttons. and .d-grid used for block level buttons.

Block Button
Button Center
Button End
<!-- Cod Box Copy begin -->
<div class="row g-3">
<div class="col-12">
<div class="card-wrapper border rounded-3">
<h6 class="sub-title fw-bold">Block Button</h6>
<div class="d-grid gap-2">
<button class="btn btn-light-primary" type="button">Click here, there is a big surprise with you, Hurry Up!!</button>
<button class="btn btn-primary" type="button">40% off all B-Stock Sale!! Hurry Up!!</button>
</div>
</div>
</div>
<div class="col-12">
<div class="card-wrapper border rounded-3">
<h6 class="sub-title fw-bold">Button Center</h6>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-light-primary" type="button">Center Button</button>
<button class="btn btn-primary" type="button">Center Button</button>
</div>
</div>
</div>
<div class="col-12">
<div class="card-wrapper border rounded-3">
<h6 class="sub-title fw-bold">Button End</h6>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-light-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
</div>
<!-- Cod Box Copy end -->

Button Variations

.btn class used for buttons and .btn-group-vertical for vertical buttons and made different types of design using .btn-group .

Vertical variation
Horizontal variation
Button toolbar
<!-- Cod Box Copy begin -->
<div class="row g-3">
<div class="col-6">
<div class="card-wrapper border rounded-3 h-100">
<h6 class="sub-title fw-bold">Vertical variation</h6>
<div class="d-flex gap-3 align-items-end flex-wrap">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-warning" type="button">Warning</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button class="btn btn-light-primary" type="button">light-primary</button>
<button class="btn btn-light-secondary" type="button">light-secondary</button>
<div class="btn-group" role="group">
<button class="btn btn-light-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">light-success</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group dropstart" role="group">
<button class="btn btn-light-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">light-danger</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group dropend" role="group">
<button class="btn btn-light-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">light-warning</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group dropup" role="group">
<button class="btn btn-light-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">light-info</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
<input class="btn-check" id="vbtn-radio1" type="radio" name="vbtn-radio" checked="">
<label class="btn btn-outline-primary" for="vbtn-radio1">Radio 1</label>
<input class="btn-check" id="vbtn-radio2" type="radio" name="vbtn-radio">
<label class="btn btn-outline-primary" for="vbtn-radio2">Radio 2</label>
<input class="btn-check" id="vbtn-radio3" type="radio" name="vbtn-radio">
<label class="btn btn-outline-primary mb-0" for="vbtn-radio3">Radio 3</label>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3">
<div class="col-12">
<div class="card-wrapper border rounded-3 h-100">
<h6 class="sub-title fw-bold">Horizontal variation</h6>
<div class="button-wrapper">
<div class="btn-group" role="group" aria-label="Default button group">
<button class="btn btn-outline-primary" type="button">How</button>
<button class="btn btn-outline-primary" type="button">Are</button>
<button class="btn btn-outline-primary" type="button">You?</button>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-primary" type="button">Y</button>
<button class="btn btn-secondary" type="button">U</button>
<button class="btn btn-warning" type="button">R</button>
<button class="btn btn-success" type="button">I</button>
<div class="btn-group" role="group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Gallery</a></li>
<li><a class="dropdown-item" href="#">Blog</a></li>
</ul>
</div>
</div>
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input class="btn-check" id="btncheck1" type="checkbox">
<label class="btn btn-outline-success mb-0" for="btncheck1">Checkbox 1</label>
<input class="btn-check" id="btncheck2" type="checkbox">
<label class="btn btn-outline-primary mb-0" for="btncheck2">Checkbox 2</label>
<input class="btn-check" id="btncheck3" type="checkbox">
<label class="btn btn-outline-success mb-0" for="btncheck3">Checkbox 3</label>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card-wrapper border rounded-3 h-100">
<h6 class="sub-title fw-bold">Button toolbar</h6>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button class="btn btn-primary" type="button">I </button>
<button class="btn btn-secondary" type="button">II </button>
<button class="btn btn-success" type="button">III</button>
<button class="btn btn-info" type="button">IV </button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button class="btn btn-warning" type="button">V </button>
<button class="btn btn-danger" type="button">VI </button>
<button class="btn btn-primary" type="button">VII</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button class="btn btn-light" type="button">VIII</button>
</div>
</div>
<div class="code-box-copy">
<button class="code-box-copy__btn btn-clipboard" data-clipboard-target="#example-head5" title="Copy"><i class="icofont icofont-copy-alt"></i></button>
<pre><code class="language-html" id="example-head5">&lt;!-- Cod Box Copy begin --&gt;
&lt;button type="button" class="btn btn-primary disabled"&gt;Disabled&lt;/button&gt;
&lt;button type="button" class="btn btn-secondary disabled"&gt;Disabled&lt;/button&gt;
&lt;button type="button" class="btn btn-success disabled"&gt;Disabled&lt;/button&gt;
&lt;button type="button" class="btn btn-info disabled"&gt;Info button&lt;/button&gt;
&lt;button type="button" class="btn btn-warning disabled"&gt;Disabled&lt;/button&gt;
&lt;button type="button" class="btn btn-danger disabled"&gt;Disabled&lt;/button&gt;
&lt;button type="button" class="btn btn-light disabled"&gt;Disabled&lt;/button&gt;
&lt;!-- Cod Box Copy end --&gt;</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cod Box Copy end -->

Bold Border Outline Buttons

Add .btn-outline-*-2x class for bold outline buttons.

<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-outline-primary-2x">primary button</button>
<button type="button" class="btn btn-outline-secondary-2x">secondary button</button>
<button type="button" class="btn btn-outline-success-2x">Success button</button>
<button type="button" class="btn btn-outline-info-2x">Info button</button>
<button type="button" class="btn btn-outline-warning-2x">warning button</button>
<button type="button" class="btn btn-outline-danger-2x">danger button</button>
<button type="button" class="btn btn-outline-light-2x txt-dark">light button</button> 
<!-- Cod Box Copy end

Radio and Checkbox Group

Add radio for .radio class & checkbox for .checkbox class used.

Radio Button
Checkbox
<!-- Cod Box Copy begin -->
<div class="row">
<div class="col-xl-6">
<div class="card-wrapper border rounded-3 bg-light">
<h6 class="sub-title fw-bold">Radio Button</h6>
<div class="btn-radio">
<div class="btn-group" data-bs-toggle="buttons">
<div class="btn btn-light-primary">
<div class="radio radio-primary">
<input id="radio7" type="radio" name="radio1" value="option1">
<label class="mb-0" for="radio7">Theme</label>
</div>
</div>
<div class="btn btn-light-primary">
<div class="radio radio-primary">
<input id="radio8" type="radio" name="radio1" value="option1" checked="">
<label class="mb-0" for="radio8">E-commerce</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card-wrapper border rounded-3 bg-light">
<h6 class="sub-title fw-bold">Checkbox</h6>
<div class="btn-group btn-option" data-bs-toggle="buttons">
<div class="btn btn-light-dark">
<div class="checkbox checkbox-dark">
<input id="checkbox-primary-1" type="checkbox">
<label class="mb-0" for="checkbox-primary-1">Theme</label>
</div>
</div>
<div class="btn btn-light-dark">
<div class="checkbox checkbox-dark">
<input id="checkbox-primary-2" type="checkbox">
<label class="mb-0" for="checkbox-primary-2">E-commerce</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cod Box Copy end -->

Gradient Buttons

Add .btn-*-gradien class for gradien buttons.

Default gradient buttons
Square gradient buttons
Rounded gradient buttons
<!-- Cod Box Copy begin -->
<div class="row">
<div class="col-xl-4">
<div class="card-wrapper border rounded-3 bg-light">
<h6 class="sub-title fw-bold">Default gradient buttons</h6>
<div class="common-flex">
<button class="btn btn-primary-gradien">Icons</button>
<button class="btn btn-secondary-gradien">Animation</button>
<button class="btn btn-success-gradien">Tasks</button>
<button class="btn btn-info-gradien">Letter box</button>
<button class="btn btn-warning-gradien">Chat</button>
<button class="btn btn-danger-gradien">Blog</button>
<button class="btn btn-light-gradien text-dark">Gallery</button>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card-wrapper border rounded-3 bg-light">
<h6 class="sub-title fw-bold">Square gradient buttons</h6>
<div class="common-flex">
<button class="btn btn-square btn-primary-gradien">Icons</button>
<button class="btn btn-square btn-secondary-gradien">Animation</button>
<button class="btn btn-square btn-success-gradien">Tasks</button>
<button class="btn btn-square btn-info-gradien">Letter box</button>
<button class="btn btn-square btn-warning-gradien">Chat</button>
<button class="btn btn-square btn-danger-gradien">Blog</button>
<button class="btn btn-square btn-light-gradien text-dark">Gallery</button>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card-wrapper border rounded-3 bg-light">
<h6 class="sub-title fw-bold">Rounded gradient buttons</h6>
<div class="common-flex">
<button class="btn btn-pill btn-air-primary btn-primary-gradien">Icons</button>
<button class="btn btn-pill btn-air-secondary btn-secondary-gradien">Animation</button>
<button class="btn btn-pill btn-air-success btn-success-gradien">Tasks</button>
<button class="btn btn-pill btn-air-info btn-info-gradien">Letter box</button>
<button class="btn btn-pill btn-air-warning btn-warning-gradien">Chat</button>
<button class="btn btn-pill btn-air-danger btn-danger-gradien">Blog</button>
<button class="btn btn-pill btn-air-light btn-light-gradien txt-dark">Gallery</button>
</div>
</div>
</div>
</div>
<!-- Cod Box Copy end -->