Open In App

How to Style Round Buttons using CSS?

Last Updated : 14 Nov, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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



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

S
shivanigupta18rk
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox