Use .btn-{color} along with .btn to create a button
.btn-{color}
.btn
Use .round for round buttons
.round
Use .btn-outline-{color} to create an outline button
.btn-outline-{color}
Use .round with outline button to create round outline button
Use .bg-light-{color} to create light buttons
.bg-light-{color}
Use .round with light button to create round light button
Use .btn-icon for icon buttons and .btn-icon.round for round icon buttons
.btn-icon
.btn-icon.round
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group
.btn-group
Add .btn-lg or .btn-sm for Fancy larger or smaller buttons size
.btn-lg
.btn-sm
Add .btn-lg or .btn-sm with .btn-outline for Fancy larger or smaller outline buttons sizes
.btn-outline
Add .btn-group-lg for larger button group size
.btn-group-lg
Add .btn-group-sm for smaller button group size
.btn-group-sm
Create block level buttons—those that span the full width of a parent — by adding .btn-block
.btn-block
Use .btn-group-vertical in the parent element of the buttons to create vertical button group
.btn-group-vertical
.gradient-purple-bliss
.gradient-mint
.gradient-pomegranate
.gradient-ibiza-sunset
.gradient-king-yna
.shadow-z-1-hover
.shadow-z-4
.big-shadow
.sidebar-shadow
.card-shadow
Use .btn-social and .btn-{social-media} like .btn-facebook for social buttons with icons. Add .round for round button.
.btn-social
.btn-{social-media}
.btn-facebook
Facebook Twitter
Google Instagram
Use .btn-social and .btn-outline-{social-media} like .btn-outline-linkedin for social buttons with icons. Add .round for round button.
.btn-outline-{social-media}
.btn-outline-linkedin
LinkedIn Reddit
Pinterest Dropbox
Use .btn-social-icon and .btn-{social-media} like .btn-facebook for social icon buttons. Add .round for round button.
.btn-social-icon
Use .btn-social-icon and .btn-outline-{social-media} like .btn-outline-linkedin for social icon buttons. Add .round for round button.
Customize & Preview in Real Time
Sidebar Width
Social Media Buttons
Default Buttons
Use
.btn-socialand.btn-{social-media}like.btn-facebookfor social buttons with icons. Add.roundfor round button.Outline Buttons
Use
.btn-socialand.btn-outline-{social-media}like.btn-outline-linkedinfor social buttons with icons. Add.roundfor round button.Default Icon Buttons
Use
.btn-social-iconand.btn-{social-media}like.btn-facebookfor social icon buttons. Add.roundfor round button.Outline Icon Buttons
Use
.btn-social-iconand.btn-outline-{social-media}like.btn-outline-linkedinfor social icon buttons. Add.roundfor round button.