Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Call to Action
Call to Action
Call to Action
Call to Action
Explore Now
View More Testimonials
<div class="d-flex align-items-center gap-4">
<div class="btn btn-gradient">
Call to Action
<svg class="ms-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="stroke-white" d="M17.25 15.25V6.75H8.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path class="stroke-white" d="M17 7L6.75 17.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="btn btn-gradient">Call to Action</div>
<div class="btn btn-gradient rounded-pill pe-3">
<span class="fs-6"> Call to Action </span>
<svg class="ms-2 rounded-circle bg-primary-light icon-shape icon-md" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path class="stroke-white" d="M9.0625 4.8125L12.4018 8L9.0625 11.1875" stroke="white" stroke-width="0.910714" stroke-linecap="round" stroke-linejoin="round" />
<path class="stroke-white" d="M12.2455 8H3.59375" stroke="white" stroke-width="0.910714" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="d-flex align-items-center gap-4 mt-4">
<div class="btn btn-outline-secondary hover-up">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="stroke-dark" d="M8.89286 4.75H6.06818C5.34017 4.75 4.75 5.34017 4.75 6.06818C4.75 13.3483 10.6517 19.25 17.9318 19.25C18.6598 19.25 19.25 18.6598 19.25 17.9318V15.1071L16.1429 13.0357L14.5317 14.6468C14.2519 14.9267 13.8337 15.0137 13.4821 14.8321C12.8858 14.524 11.9181 13.9452 10.9643 13.0357C9.98768 12.1045 9.41548 11.1011 9.12829 10.494C8.96734 10.1537 9.06052 9.76091 9.32669 9.49474L10.9643 7.85714L8.89286 4.75Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Call to Action
</div>
<div class="btn btn-outline-secondary hover-up">
Explore Now
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="stroke-dark" d="M17.25 15.25V6.75H8.75" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path class="stroke-dark" d="M17 7L6.75 17.25" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="d-flex align-items-center gap-4 mt-4">
<div class="btn btn-dark hover-up">
View More Testimonials
<svg class="ms-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="stroke-white" d="M17.25 15.25V6.75H8.75" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path class="stroke-white" d="M17 7L6.75 17.25" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="d-flex gap-4">
<div class="shadow-2 bg-white icon-shape rounded-circle icon-xxl">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="stroke-dark" d="M10.25 6.75L4.75 12L10.25 17.25" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path class="stroke-dark" d="M19.25 12L5 12" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="shadow-2 bg-primary icon-shape rounded-circle icon-xxl">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="stroke-white" d="M13.75 6.75L19.25 12L13.75 17.25" stroke="#F3F4F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path class="stroke-white" d="M19 12L4.75 12" stroke="#F3F4F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="shadow-2 bg-white icon-shape rounded-circle icon-xxl">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="stroke-dark" d="M7.64939 4.96873L18.1464 10.2052C19.6182 10.9418 19.6178 13.0388 18.1457 13.7748L7.64869 19.0391C6.31879 19.704 4.75299 18.7388 4.75299 17.2541L4.75299 6.75335C4.75299 5.26832 6.31949 4.30314 7.64939 4.96873Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>