Use our custom button styles for actions in forms, dialogs, with support for multiple sizes, states, etc. Bootstrap docs
<a href="#" class="btn btn-yellow rounded-pill">Button</a> <a href="#" class="btn btn-orange rounded-pill">Button</a> <a href="#" class="btn btn-red rounded-pill">Button</a> <a href="#" class="btn btn-pink rounded-pill">Button</a> <a href="#" class="btn btn-violet rounded-pill">Button</a> <a href="#" class="btn btn-purple rounded-pill">Button</a> <a href="#" class="btn btn-blue rounded-pill">Button</a> <a href="#" class="btn btn-aqua rounded-pill">Button</a> <a href="#" class="btn btn-green rounded-pill">Button</a> <a href="#" class="btn btn-leaf rounded-pill">Button</a> <a href="#" class="btn btn-navy rounded-pill">Button</a> <a href="#" class="btn btn-fuchsia rounded-pill">Button</a> <a href="#" class="btn btn-sky rounded-pill">Button</a> <a href="#" class="btn btn-grape rounded-pill">Button</a> <a href="#" class="btn btn-ash rounded-pill">Button</a> <a href="#" class="btn btn-primary rounded-pill">Button</a> <a href="#" class="btn btn-white rounded-pill">Button</a> <a href="#" class="btn btn-soft-yellow rounded-pill">Button</a> <a href="#" class="btn btn-soft-orange rounded-pill">Button</a> <a href="#" class="btn btn-soft-red rounded-pill">Button</a> <a href="#" class="btn btn-soft-pink rounded-pill">Button</a> <a href="#" class="btn btn-soft-violet rounded-pill">Button</a> <a href="#" class="btn btn-soft-purple rounded-pill">Button</a> <a href="#" class="btn btn-soft-blue rounded-pill">Button</a> <a href="#" class="btn btn-soft-aqua rounded-pill">Button</a> <a href="#" class="btn btn-soft-green rounded-pill">Button</a> <a href="#" class="btn btn-soft-leaf rounded-pill">Button</a> <a href="#" class="btn btn-soft-fuchsia rounded-pill">Button</a> <a href="#" class="btn btn-soft-sky rounded-pill">Button</a> <a href="#" class="btn btn-soft-grape rounded-pill">Button</a> <a href="#" class="btn btn-soft-dark rounded-pill">Button</a> <a href="#" class="btn btn-soft-ash rounded-pill">Button</a>
<a href="#" class="btn btn-gradient gradient-1 rounded-pill">Text</a> <a href="#" class="btn btn-gradient gradient-2 rounded-pill">Text</a> <a href="#" class="btn btn-gradient gradient-3 rounded-pill">Text</a> <a href="#" class="btn btn-gradient gradient-4 rounded-pill">Text</a> <a href="#" class="btn btn-gradient gradient-5 rounded-pill">Text</a> <a href="#" class="btn btn-gradient gradient-6 rounded-pill">Text</a> <a href="#" class="btn btn-gradient gradient-7 rounded-pill">Text</a> <a href="#" class="btn btn-outline-gradient gradient-1 rounded-pill"><span>Text</span></a> <a href="#" class="btn btn-outline-gradient gradient-2 rounded-pill"><span>Text</span></a> <a href="#" class="btn btn-outline-gradient gradient-3 rounded-pill"><span>Text</span></a> <a href="#" class="btn btn-outline-gradient gradient-4 rounded-pill"><span>Text</span></a> <a href="#" class="btn btn-outline-gradient gradient-5 rounded-pill"><span>Text</span></a> <a href="#" class="btn btn-outline-gradient gradient-6 rounded-pill"><span>Text</span></a> <a href="#" class="btn btn-outline-gradient gradient-7 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-primary btn-lg rounded-pill">Large Button</a> <a href="#" class="btn btn-primary rounded-pill">Default Button</a> <a href="#" class="btn btn-primary btn-sm rounded-pill">Small Button</a>
<a href="#" class="btn btn-primary rounded-0">Square</a> <a href="#" class="btn btn-primary">Rounded</a> <a href="#" class="btn btn-primary rounded-xl">Rounder</a> <a href="#" class="btn btn-primary rounded-pill">Pill</a>
<a href="#" class="btn btn-primary rounded-pill">Solid</a> <a href="#" class="btn btn-soft-primary rounded-pill">Soft</a> <a href="#" class="btn btn-outline-primary rounded-pill">Outline</a> <a href="#" class="btn btn-gradient gradient-1 rounded-pill me-1 mb-2 mb-md-0">Gradient</a> <a href="#" class="btn btn-outline-gradient gradient-1 rounded-pill me-1 mb-2 mb-md-0"><span>Outline Gradient</span></a>
<a href="#" class="btn btn-circle btn-primary btn-lg"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-primary"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-primary btn-sm"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-soft-primary btn-lg"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-soft-primary"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-soft-primary btn-sm"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-outline-primary btn-lg"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-outline-primary"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-outline-primary btn-sm"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-gradient gradient-1 btn-lg"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-gradient gradient-1"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-gradient gradient-1 btn-sm"><i class="uil uil-check"></i></a> <a href="#" class="btn btn-circle btn-outline-gradient gradient-1 btn-lg"><span><i class="uil uil-check"></i></span></a> <a href="#" class="btn btn-circle btn-outline-gradient gradient-1"><span><i class="uil uil-check"></i></span></a> <a href="#" class="btn btn-circle btn-outline-gradient gradient-1 btn-sm"><span><i class="uil uil-check"></i></span></a>
<nav class="nav social"> <a href="#" class="btn btn-circle btn-sm btn-twitter"> <i class="uil uil-twitter"></i> </a> <a href="#" class="btn btn-circle btn-sm btn-facebook"> <i class="uil uil-facebook-f"></i> </a> <a href="#" class="btn btn-circle btn-sm btn-dribbble"> <i class="uil uil-dribbble"></i> </a> </nav> <nav class="nav social social-muted"> <a href="#"><i class="uil uil-twitter"></i></a> <a href="#"><i class="uil uil-facebook-f"></i></a> <a href="#"><i class="uil uil-dribbble"></i></a> </nav> <nav class="nav social"> <a href="#"><i class="uil uil-twitter"></i></a> <a href="#"><i class="uil uil-facebook-f"></i></a> <a href="#"><i class="uil uil-dribbble"></i></a> </nav>
<a class="btn btn-primary btn-icon btn-icon-start rounded"> <i class="uil uil-apple"></i> App Store </a> <a class="btn btn-primary btn-icon btn-icon-end rounded"> Google Play <i class="uil uil-google-play"></i> </a>
<a href="#" class="btn btn-expand btn-primary rounded-pill"> <i class="uil uil-arrow-right"></i> <span>Learn More</span> </a> <a href="#" class="btn btn-expand btn-soft-primary rounded-pill"> <i class="uil uil-arrow-right"></i> <span>Learn More</span> </a>
<a href="#" class="btn btn-circle btn-primary btn-play ripple"> <i class="icn-caret-right"></i> </a> <a href="#" class="btn btn-circle btn-soft-primary btn-play ripple"> <i class="icn-caret-right"></i> </a>
Social