Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Style Round Buttons with CSS
To make round buttons, the border-radius property plays a key role. Set it to 50% and that's it. It will convert the shape to rounded. To set multiple buttons, use the display property with the value block. This will arrange them. Also, if you want to change the style on hover, then use the :hover selector. Let us see how to style round buttons with HTML and CSS.
Create a button shape
Create links using the <a> element and make it look like buttons −
<a href="#" class="btn1">50%</a> <a href="#" class="btn2">50%</a>
Text decoration none
The text-decoration property is set to none to avoid the links getting underlines because we need to shape it like a rounded button −
a {
text-decoration: none;
display: inline-block;
padding: 18px;
font-size: 35px;
width: 60px;
height: 60px;
text-align: center;
}
Rounded buttons
The shape is changed to rounded using the border-radius property −
.btn1 {
border-radius: 50%;
background-color: #acacac;
color: black;
}
.btn2 {
border-radius: 50%;
background-color: rgb(68, 30, 112);
color: white;
}
Hover the rounded buttons
The :hover selector is used to hover the rounded buttons shape. On hover the background and text color are changed −
.btn1:hover {
background-color: #ddd;
color: black;
}
.btn2:hover {
background-color: rgb(121, 37, 133);
color: white;
}
Example
The following is the code to style round buttons with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
display: inline-block;
padding: 18px;
font-size: 35px;
width: 60px;
height: 60px;
text-align: center;
}
.btn1:hover {
background-color: #ddd;
color: black;
}
.btn2:hover {
background-color: rgb(121, 37, 133);
color: white;
}
.btn1 {
border-radius: 50%;
background-color: #acacac;
color: black;
}
.btn2 {
border-radius: 50%;
background-color: rgb(68, 30, 112);
color: white;
}
</style>
</head>
<body>
<h1>Style round Button Example</h1>
<a href="#" class="btn1">50%</a>
<a href="#" class="btn2">50%</a>
</body>
</html>
629 Views
