How to style outline 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 outline buttons using CSS ?

S

shivanigupta18rk

Improve

Article Tags :

Similar Reads

How to style round buttons using CSS ?

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. Add Style To Round Buttons Using CSSMake a basic struct

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 Style Alert Buttons using CSS?

Styling alert buttons with CSS enhances user experience by making buttons more visually appealing and interactive. We can customize their look using CSS properties like color, padding, and hover effects. In this tutorial, we will focus on how to style "alert" buttons using CSS. These are the followi

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

How to use buttons with icons using Pure CSS?

Incorporating icon fonts with Pure buttons is a simple task using Pure CSS. Since Pure CSS does not come with its own icon pack, we are using icon fonts from Font Awesome. Before creating buttons with icons first we must include the pure.css file into our HTML file directly from CDN. Then link the F

How to Style Social Media Buttons with CSS?

Styling with CSS increases user interactiveness by adding visual effects like hover animations, color changes, and transitions to social media buttons. Below are the approaches to style social media buttons with CSS: Table of Content Hovering Effect StylingAnimation Effect StylingHovering Effect Sty

How to style a checkbox using CSS ?

Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo