Open In App

Blaze UI Button Rounded Buttons

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Syntax:

<button class="c-button c-button--rounded ">
    Content
</button>

Example 1: This example demonstrates the basic rounded button in Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <strong>Blaze UI Rounded Button</strong>
        <br>
  
        <button type="button" 
            class="c-button c-button--rounded">
            Button
        </button>
    </center>
</body>
  
</html>


Output:

Output

Example 2: This example demonstrates the all-colored variation of the rounded button in Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Rounded Button</strong>
        <br>
        <button type="button" class="c-button c-button--rounded 
            c-button--ghost c-button--brand">
            Button
        </button>
        <button type="button" class="c-button c-button--rounded 
            c-button--ghost c-button--info">
            Button
        </button>
        <button type="button" class="c-button c-button--rounded 
            c-button--ghost c-button--success">
            Button
        </button>
        <button type="button" class="c-button c-button--rounded 
            c-button--ghost c-button--error">
            Button
        </button>
        <button type="button" class="c-button c-button--rounded 
            c-button--ghost c-button--warning">
            Button
        </button>
    </center>
</body>
  
</html>


Output:

Output

Reference: https://www.blazeui.com/components/buttons/



Last Updated : 19 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads