Buttons
Default Button
Html
<div class="btn-list">
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
</div>Disabled buttons
Html
<div class="btn-list">
<a href="#" class="btn btn-light disabled">Light</a>
<a href="#" class="btn btn-primary disabled">Primary</a>
<a href="#" class="btn btn-secondary disabled">Secondary</a>
<a href="#" class="btn btn-success disabled">Success</a>
<a href="#" class="btn btn-info disabled">Info</a>
<a href="#" class="btn btn-warning disabled">Warning</a>
<a href="#" class="btn btn-danger disabled">Danger</a>
</div>Square buttons
Html
<div class="btn-list">
<a href="#" class="btn btn-square btn-light">Light</a>
<a href="#" class="btn btn-square btn-primary">Primary</a>
<a href="#" class="btn btn-square btn-secondary">Secondary</a>
<a href="#" class="btn btn-square btn-success">Success</a>
<a href="#" class="btn btn-square btn-info">Info</a>
<a href="#" class="btn btn-square btn-warning">Warning</a>
<a href="#" class="btn btn-square btn-danger">Danger</a>
</div>Rounded buttons
Html
<div class="btn-list">
<a href="#" class="btn btn-pill btn-light">Light</a>
<a href="#" class="btn btn-pill btn-primary">Primary</a>
<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
<a href="#" class="btn btn-pill btn-success">Success</a>
<a href="#" class="btn btn-pill btn-info">Info</a>
<a href="#" class="btn btn-pill btn-warning">Warning</a>
<a href="#" class="btn btn-pill btn-danger">Danger</a>
</div>Btn Outline buttons
Html
<div class="btn-list">
<a href="#" class="btn btn-outline-light">Light</a>
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
</div>Btn Outline Disabled buttons
Html
<div class="btn-list">
<a href="#" class="btn btn-outline-light disabled">Light</a>
<a href="#" class="btn btn-outline-primary disabled">Primary</a>
<a href="#" class="btn btn-outline-secondary disabled">Secondary</a>
<a href="#" class="btn btn-outline-success disabled">Success</a>
<a href="#" class="btn btn-outline-info disabled">Info</a>
<a href="#" class="btn btn-outline-warning disabled">Warning</a>
<a href="#" class="btn btn-outline-danger disabled">Danger</a>
</div>Button with icon
Html
<div class="btn-list">
<button type="button" class="btn btn-dark"><i class="fe fe-upload mr-2"></i>Upload</button>
<button type="button" class="btn btn-warning"><i class="fe fe-heart mr-2"></i>I like</button>
<button type="button" class="btn btn-success"><i class="fe fe-check mr-2"></i>I agree</button>
<button type="button" class="btn btn-primary"><i class="fe fe-plus mr-2"></i>More</button>
<button type="button" class="btn btn-danger"><i class="fe fe-link mr-2"></i>Link</button>
<button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button>
</div>Button with Svg icon
Html
<div class="btn-list">
<button type="button" class="btn btn-dark btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M13 4H6v16h12V9h-5V4zm3 14H8v-2h8v2zm0-6v2H8v-2h8z" opacity=".3"></path><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"></path></svg><div class="btn-svg-text">File</div></button>
<button type="button" class="btn btn-warning btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M5 19h14V8H5v11zm5.55-6v-3h2.91v3H16l-4 4-4-4h2.55z" opacity=".3"></path><path d="M16 13h-2.55v-3h-2.9v3H8l4 4zm4.54-7.77l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM6.24 5h11.52l.81.97H5.44l.8-.97zM19 19H5V8h14v11z"></path></svg> <span class="btn-svg-text">Download</span></button>
<button type="button" class="btn btn-success btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M5 8h14V6H5z" opacity=".3"></path><path d="M7 11h2v2H7zm12-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-4 3h2v2h-2zm-4 0h2v2h-2z"></path></svg> <span class="btn-svg-text">Calendar</span></button>
<button type="button" class="btn btn-primary btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16.5 5c-1.54 0-3.04.99-3.56 2.36h-1.87C10.54 5.99 9.04 5 7.5 5 5.5 5 4 6.5 4 8.5c0 2.89 3.14 5.74 7.9 10.05l.1.1.1-.1C16.86 14.24 20 11.39 20 8.5c0-2-1.5-3.5-3.5-3.5z" opacity=".3"></path><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path></svg> <span class="btn-svg-text">Like</span></button>
<button type="button" class="btn btn-danger btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><circle cx="18" cy="5" opacity=".3" r="1"></circle><circle cx="6" cy="12" opacity=".3" r="1"></circle><circle cx="18" cy="19.02" opacity=".3" r="1"></circle><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></svg><span class="btn-svg-text"> Share</span></button>
</div>Button with icon-loader
Html
<div class="btn-list">
<button type="button" class="btn btn-dark">Upload <i class="fa fa-upload fa-spin ml-2"></i></button>
<button type="button" class="btn btn-warning">I like <i class="fa fa-heart fa-spin ml-2"></i></button>
<button type="button" class="btn btn-success">I agree <i class="fa fa-check fa-spin ml-2"></i></button>
<button type="button" class="btn btn-primary">More <i class="fa fa-plus fa-spin ml-2"></i></button>
<button type="button" class="btn btn-danger">Link <i class="fa fa-link fa-spin ml-2"></i></button>
<button type="button" class="btn btn-info">Comment <i class="fa fa-comment-o fa-spin ml-2"></i></button>
</div>Button size
Html
<div class="btn-list">
<button type="button" class="btn btn-warning btn-sm mb-1">Small button</button>
<button type="button" class="btn btn-info mb-1">Medium button</button>
<button type="button" class="btn btn-success btn-lg mb-1">Large button</button>
<button type="button" class="btn btn-primary btn-block">Block level button</button>
</div>Social buttons
Html
<div class="btn-list">
<button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i>Facebook</button>
<button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i>Twitter</button>
<button type="button" class="btn btn-google"><i class="fa fa-google mr-2"></i>Google</button>
<button type="button" class="btn btn-youtube"><i class="fa fa-youtube mr-2"></i>Youtube</button>
<button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo mr-2"></i>Vimeo</button>
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble mr-2"></i>Dribble</button>
<button type="button" class="btn btn-github"><i class="fa fa-github mr-2"></i>Github</button>
<button type="button" class="btn btn-instagram"><i class="fa fa-instagram mr-2"></i>Instagram</button>
<button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest mr-2"></i>Pinterest</button>
<button type="button" class="btn btn-vk"><i class="fa fa-vk mr-2"></i>VKontakte</button>
<button type="button" class="btn btn-rss"><i class="fa fa-rss mr-2"></i>RSS</button>
<button type="button" class="btn btn-flickr"><i class="fa fa-flickr mr-2"></i>Flickr</button>
</div>Color variations
Html
<div class="btn-list">
<a href="#" class="btn btn-blue">Blue</a>
<a href="#" class="btn btn-azure">Azure</a>
<a href="#" class="btn btn-indigo">Indigo</a>
<a href="#" class="btn btn-purple">Purple</a>
<a href="#" class="btn btn-pink">Pink</a>
<a href="#" class="btn btn-red">Red</a>
<a href="#" class="btn btn-orange">Orange</a>
<a href="#" class="btn btn-yellow">Yellow</a>
<a href="#" class="btn btn-lime">Lime</a>
<a href="#" class="btn btn-green">Green</a>
<a href="#" class="btn btn-teal">Teal</a>
<a href="#" class="btn btn-cyan">Cyan</a>
<a href="#" class="btn btn-gray">Gray</a>
<a href="#" class="btn btn-gray-dark">Dark gray</a>
</div>Social buttons
Html
<div class="btn-list">
<button type="button" class="btn btn-icon btn-facebook"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-icon btn-twitter"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-icon btn-google"><i class="fa fa-google"></i></button>
<button type="button" class="btn btn-icon btn-youtube"><i class="fa fa-youtube"></i></button>
<button type="button" class="btn btn-icon btn-vimeo"><i class="fa fa-vimeo"></i></button>
<button type="button" class="btn btn-icon btn-dribbble"><i class="fa fa-dribbble"></i></button>
<button type="button" class="btn btn-icon btn-github"><i class="fa fa-github"></i></button>
<button type="button" class="btn btn-icon btn-instagram"><i class="fa fa-instagram"></i></button>
<button type="button" class="btn btn-icon btn-pinterest"><i class="fa fa-pinterest"></i></button>
</div>Icon buttons
Html
<div class="btn-list">
<button type="button" class="btn btn-icon btn-primary"><i class="fe fe-activity"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-github"><i class="fe fe-github"></i></button>
<button type="button" class="btn btn-icon btn-success"><i class="fe fe-bell"></i></button>
<button type="button" class="btn btn-icon btn-warning"><i class="fe fe-star"></i></button>
<button type="button" class="btn btn-icon btn-danger"><i class="fe fe-trash"></i></button>
<button type="button" class="btn btn-icon btn-purple"><i class="fe fe-bar-chart"></i></button>
<button type="button" class="btn btn-icon btn-secondary"><i class="fe fe-git-merge"></i></button>
</div>Svg Icon Buttons
Html
<div class="btn-list">
<button type="button" class="btn btn-dark btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M13 4H6v16h12V9h-5V4zm3 14H8v-2h8v2zm0-6v2H8v-2h8z" opacity=".3"></path><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"></path></svg>File</button>
<button type="button" class="btn btn-warning btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M5 19h14V8H5v11zm5.55-6v-3h2.91v3H16l-4 4-4-4h2.55z" opacity=".3"></path><path d="M16 13h-2.55v-3h-2.9v3H8l4 4zm4.54-7.77l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM6.24 5h11.52l.81.97H5.44l.8-.97zM19 19H5V8h14v11z"></path></svg> Download</button>
<button type="button" class="btn btn-success btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M5 8h14V6H5z" opacity=".3"></path><path d="M7 11h2v2H7zm12-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-4 3h2v2h-2zm-4 0h2v2h-2z"></path></svg> Calendar</button>
<button type="button" class="btn btn-primary btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M16.5 5c-1.54 0-3.04.99-3.56 2.36h-1.87C10.54 5.99 9.04 5 7.5 5 5.5 5 4 6.5 4 8.5c0 2.89 3.14 5.74 7.9 10.05l.1.1.1-.1C16.86 14.24 20 11.39 20 8.5c0-2-1.5-3.5-3.5-3.5z" opacity=".3"></path><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path></svg> Like</button>
<button type="button" class="btn btn-danger btn-svgs btn-svg-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"></path><circle cx="18" cy="5" opacity=".3" r="1"></circle><circle cx="6" cy="12" opacity=".3" r="1"></circle><circle cx="18" cy="19.02" opacity=".3" r="1"></circle><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></svg> Share</button>
</div>Button dropdown
Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns styles (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.
Html
<div class="text-wrap">
<p>Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns styles (your button or link) and the dropdown menu within <code class="highlighter-rouge">.dropdown</code>, or another element that declares <code class="highlighter-rouge">position: relative;</code>. Dropdowns can be triggered from <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><button></code> elements to better fit your potential needs.</p>
<div class="example">
<div class="btn-list">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<i class="fe fe-calendar"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<i class="fe fe-calendar mr-2"></i>Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>Loading button
Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.
Html
<div class="btn-list">
<button type="button" class="btn btn-primary btn-loading">Button text</button><br>
<button type="button" class="btn btn-success btn-loading btn-icon"><i class="fe fe-check"></i></button>
<button type="button" class="btn btn-warning btn-loading btn-sm">Button text</button><br>
<button type="button" class="btn btn-danger btn-loading btn-lg">Button text</button>
<button type="button" class="btn btn-info btn-loading btn-block">Button text</button>
</div>List of buttons
You can now create a list of buttons with the .btn-list container.
Use the .text-center modifiers to alter the alignment.
Use the .text-right modifiers to alter the alignment.
Html
<div class="text-wrap">
<p>You can now create a list of buttons with the <code class="highlighter-rouge">.btn-list</code> container.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
</div>
</div>
<div class="text-wrap mt-6">
<p>Use the <code class="highlighter-rouge">.text-center</code> modifiers to alter the alignment.</p>
<div class="example">
<div class="btn-list text-center">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
</div>
</div>
<div class="text-wrap mt-6">
<p>Use the <code class="highlighter-rouge">.text-right</code> modifiers to alter the alignment.</p>
<div class="example">
<div class="btn-list text-right">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
</div>
</div>Group Buttons
Html
<div aria-label="Basic example" class="btn-group ml-3 mb-3" role="group">
<button class="btn btn-secondary active" type="button">Left</button> <button class="btn btn-secondary pd-x-25" type="button">Center</button> <button class="btn btn-secondary pd-x-25" type="button">Right</button>
</div>
<div aria-label="Basic example" class="btn-group ml-3 mb-3" role="group">
<button class="btn btn-secondary btn-icon active" type="button"><i class="typcn typcn-media-play-outline"></i></button> <button class="btn btn-secondary btn-icon" type="button"><i class="typcn typcn-media-pause-outline"></i></button> <button class="btn btn-secondary btn-icon" type="button"><i class="typcn typcn-media-stop-outline"></i></button>
</div>
<div aria-label="Basic example" class="btn-group ml-3 mb-3" role="group">
<button class="btn btn-indigo btn-icon active" type="button"><i class="typcn typcn-media-play-outline"></i></button> <button class="btn btn-primary btn-icon" type="button"><i class="typcn typcn-media-pause-outline"></i></button> <button class="btn btn-primary btn-icon" type="button"><i class="typcn typcn-media-stop-outline"></i></button>
</div>