Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the .btn classes with the <button> element and add additional styling that will make your buttons serve their purpose and draw users' attention.
<a href="#" class="btn" role="button">Link</a>
<button class="btn">Button</button>
<input type="button" class="btn" value="Input" />
<input type="submit" class="btn" value="Submit" />
<input type="reset" class="btn" value="Reset" />The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
<a href="#" class="btn" role="button">Link</a>Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot.
<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-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-light">Light</a>Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
<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-warning disabled">Warning</a>
<a href="#" class="btn btn-danger disabled">Danger</a>
<a href="#" class="btn btn-info disabled">Info</a>
<a href="#" class="btn btn-dark disabled">Dark</a>
<a href="#" class="btn btn-light disabled">Light</a>Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
<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>Use the .btn-ghost-* class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time.
<a href="#" class="btn btn-ghost-primary">Primary</a>
<a href="#" class="btn btn-ghost-secondary">Secondary</a>
<a href="#" class="btn btn-ghost-success">Success</a>
<a href="#" class="btn btn-ghost-warning">Warning</a>
<a href="#" class="btn btn-ghost-danger">Danger</a>
<a href="#" class="btn btn-ghost-info">Info</a>
<a href="#" class="btn btn-ghost-dark">Dark</a>
<div class="p-2 bg-dark">
<a href="#" class="btn btn-ghost-light">Light</a>
</div>Use the .btn-square class to remove the border radius, if you want the corners of your button to be square rather than rounded.
<a href="#" class="btn btn-square">Square button</a>Add the .btn-pill class to your button to make it rounded and give it a modern and attractive look.
<a href="#" class="btn btn-pill">Pill button</a>Replace the default modifier class with the .btn-outline-* class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
<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-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-dark">Dark</a>
<a href="#" class="btn btn-outline-light">Light</a>Add .btn-lg or .btn-sm to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-lg">Large button</button><button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-sm">Small button</button>Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
Icons can be found here
<button type="button" class="btn">
<!-- Download SVG icon from http://tabler.io/icons/icon/upload -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
<path d="M7 9l5 -5l5 5" />
<path d="M12 4l0 12" />
</svg>Upload
</button>
<button type="button" class="btn btn-warning">
<!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path
d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg>I like
</button>
<button type="button" class="btn btn-success">
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M5 12l5 5l10 -10" />
</svg>I agree
</button>
<button type="button" class="btn btn-primary">
<!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M12 5l0 14" />
<path d="M5 12l14 0" />
</svg>More
</button>
<button type="button" class="btn btn-danger">
<!-- Download SVG icon from http://tabler.io/icons/icon/link -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>Link
</button>
<button type="button" class="btn btn-info">
<!-- Download SVG icon from http://tabler.io/icons/icon/message -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M8 9h8" />
<path d="M8 13h6" />
<path
d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" />
</svg>Comment
</button>You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
<a href="#" class="btn btn-facebook">
<svg>...</svg>
Facebook
</a>You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space.
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
<svg>...</svg>
</a>Add the .btn-icon class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
<svg>...</svg>
</a>Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<svg>...</svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>Add the .btn-loading class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
<a href="#" class="btn btn-primary btn-loading">
Button
</a>
<a href="#" class="btn btn-primary btn-loading">
Loading button with loooong content
</a><a href="#" class="btn btn-primary">
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Button
</a>Create a list of buttons using the .btn-list container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
<div class="btn-list">
<a href="#" class="btn">One</a>
<a href="#" class="btn">Two</a>
<a href="#" class="btn">Three</a>
<a href="#" class="btn">Four</a>
<a href="#" class="btn">Five</a>
<a href="#" class="btn">Six</a>
<a href="#" class="btn">Seven</a>
<a href="#" class="btn">Eight</a>
<a href="#" class="btn">Nine</a>
<a href="#" class="btn">Ten</a>
<a href="#" class="btn">Eleven</a>
<a href="#" class="btn">Twelve</a>
<a href="#" class="btn">Thirteen</a>
<a href="#" class="btn">Fourteen</a>
<a href="#" class="btn">Fifteen</a>
<a href="#" class="btn">Sixteen</a>
<a href="#" class="btn">Seventeen</a>
<a href="#" class="btn">Eighteen</a>
<a href="#" class="btn">Nineteen</a>
</div>Use the .text-center or the .text-end modifiers to change the buttons' alignment and place them where they suit best.
<div class="btn-list justify-content-center">
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div><div class="btn-list justify-content-end">
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div><div class="btn-list">
<a href="#" class="btn btn-outline-danger me-auto">Delete</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
<a href="#" class="btn">
<span class="avatar"
style="background-image: url(/static/avatars/002f.jpg);"></span>
Avatar
</a>
<a href="#" class="btn">
<span class="avatar" style="
background-image: url(/static/avatars/002m.jpg);
"></span>
Avatar
</a>
<a href="#" class="btn">
<span class="avatar" style="
background-image: url(/static/avatars/004f.jpg);
"></span>
Avatar
</a>