How to Style Round Buttons using CSS?

How to Style Round Buttons using CSS?

Last Updated : 14 Nov, 2024

Round buttons are circular buttons used on websites. They usually have icons or text for actions. To style round buttons using CSS, set their width and height equal, use border-radius: 50% for a circular shape, and add colors and hover effects.

btnb

Add Style To Round Buttons Using CSS

Make a basic structure of the web page using <h1> and <button> elements. Link the external stylesheet to the HTML file.
Create the five-button element and give them different colors. Set box-shadow property when the user hovers over it.
For giving the round button effect to the buttons we use the border-radius property.
The button element having a class named "mybtn1" sets the border-radius to 10px. similarly for "mybtn2", "mybtn3", "mybtn4", and "mybtn5" set the border-radius property to 1.5rem, 50%, 20px, and 5px repectively.

HTML

<!DOCTYPE html>
<html lang="en">

<body>
    <h1>Code World</h1>
  
    <div class="btnbox">
        <button class="mybtn mybtn1">
            Button
        </button>
        <button class="mybtn mybtn2">
            Button
        </button>
        <button class="mybtn mybtn3">
            Button
        </button>
        <button class="mybtn mybtn4">
            Button
        </button>
        <button class="mybtn mybtn5">
            Button
        </button>
    </div>
</body>

</html>

CSS

h1 {
    text-align: center;
    color: green;
}

.mybtn {
    color: beige;
    height: 50px;
    font-size: 20px;
    margin: 5px;
    border: none;
    width: 100px;
}

.btnbox {
    display: flex;
    justify-content: center;
}

.mybtn:hover {
    background-color: rgb(184, 224, 219);
    color: rgb(82, 82, 74);
    box-shadow: rgba(32, 31, 31, 0.35) 0px 7px 10px;
    font-weight: 900;

}

.mybtn3 {
    border-radius: 50%;
    background-color: red;
}

.mybtn1 {
    border-radius: 10px;
    background-color: blueviolet;
}

.mybtn2 {
    border-radius: 1.5rem;
    background-color: green;
}

.mybtn4 {
    border-radius: 20px;
    background-color: rgb(196, 156, 103);
}

.mybtn5 {
    border-radius: 5px;
    background-color: rgb(70, 194, 132);
}

Output

How to Style Round Buttons using CSS?

S

shivanigupta18rk

Improve

Article Tags :

Similar Reads

How to style outline buttons using CSS ?

This article will explore how to style outline buttons using CSS. The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect in two different

How to Style Text Buttons using CSS?

Text buttons are buttons that consist only of text without any additional background or border styling. They are commonly used for simple actions or navigation elements in a website or web application. Table of Content Basic StylingHover EffectsBasic StylingIn basic CSS we can style text buttons usi

How to create Text Buttons using CSS ?

In this article, we are going to see how to create text buttons using CSS. The text button is a button that appears to be text but acts as a button if we press it. Text buttons are different from anchor tags even if they might look similar. To create text buttons first, we create simple buttons in H

How to style block buttons (full-width) using CSS ?

In this article, we will explore how to style block buttons with full width using CSS. Making buttons stand out on a website is crucial. Such types of buttons provide responsiveness to the web page that works well on various devices. Styling buttons with clear words, appealing colors, and effects, c

How to make rounded corner using CSS ?

Creating rounded corners is a popular design technique in web development that enhances the visual appeal of web elements. The CSS border-radius property allows you to easily set the radius of an element's corners, making them rounded. In this article, we will explore how to use the border-radius pr