Blaze UI Button Rounded Buttons
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
Buttons help us to initiate an action such as submitting a form, navigating to another link, etc. There are multiple types of buttons in Blaze UI such as the Basic button, ghost button, rounded button, full-width button, and many more. In this article, we will discuss the Rounded Button in Blaze UI.
The rounded buttons are buttons with rounded corners which are also known as pill-shaped Buttons. To create rounded buttons in the Blaze UI, we use the .c-button–rounded class along with the .c-button class. These classes can be applied to the <button> element as well as on <a> element.
Classes Used for Rounded Button:
- .c-button–rounded: This class makes the corner of the button rounded and converts it into a pill-shaped button.
<button class="c-button c-button--rounded "> Content </button>
Example 1: This example demonstrates the basic rounded button in Blaze UI.
Example 2: This example demonstrates the all-colored variation of the rounded button in Blaze UI.