css round button
ASHISH GUPTA
3 min read
- CSS
- Design
Creating Stylish Round Buttons with CSS
Stop making boring and unattractive buttons, Round buttons are popular design component in modern web design. provide best user experience and enhance your user interface of your website. This blog will guide you through creating stylish round buttons using CSS. we explore various techniques to animate and style the button component.
Round button Usage?
The border of rounded button is not means fully circle button but it provide rounded edge of button which improve the user experience so that user can interact with your website.A sort in way of arranging develop accept at your location so in this web diary we reasonable exploring button component their shape can draw attention,encourage clicks, make UI alluring.
Essential Circular Button Component
To create a basic round button, you'll have to be utilize a number of direct CSS properties. let's learn step-by-step
Step 1: Basic HTML -> structure of our button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Round Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="round-button">Click Me</button>
</body>
</html>
Step 2: Basic CSS -> add some styling to our button component Rounded button class. create a file with named "styles.css" not necessary to write this name, you can write file name whatever you want but in HTML file you should link correctly CSS file.
.round-button {
background-color: #4CAF50; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 15px 30px; /* Some padding */
text-align: center; /* Centered text */
text-decoration: none; /* Remove underline */
display: inline-block; /* Get the element to respect width and height */
font-size: 16px; /* Increase font size */
margin: 10px 2px; /* Some margin */
cursor: pointer; /* Pointer/hand icon */
border-radius: 50px; /* Rounded corners */
transition: background-color 0.3s; /* Smooth transition */
}
.round-button:hover {
background-color: #45a049; /* Darker green on hover */
}Advanced Customizations
Now You can customize your round button , let's learn some advanced customizations like adding gradients,shadows, animations. here are examples:
Gradient Background
.round-button {
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient background */
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 50px;
transition: background 0.3s;
}
.round-button:hover {
background: linear-gradient(to right, #feb47b, #ff7e5f); /* Reverse gradient on hover */
}
Box Shadow
.round-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 50px;
transition: background-color 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}
.round-button:hover {
background-color: #45a049;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
}
Animation on Click
.round-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 50px;
transition: background-color 0.3s, transform 0.2s;
}
.round-button:active {
transform: scale(0.95); /* Scale down on click */
}
Conclusion
Here are few examples of rounded button. these are basic examples of rounded button. By using CSS properties such as such as border-radius, box-shadow, and transition, you can create your button components based on your designing skills like color gradient using color pallet, now let's enhance your user experience of websites. Try with distinctive styles, colors, and impacts to coordinate your plan needs and make an locks in interface for your clients. do not overlooked to like this web journal . I'll give you challenge make a intuitively adjusted buttons component and comment your HTML and CSS code. exhibit your planning expertise.
Thank you,
Happy Coding!
