css

Create rounded shape style button using CSS

September 13, 2022

When it comes to styling buttons on webpages, there are many different options to choose from. One popular style is the rounded shape button, which can be created using CSS. This type of button is often used for call-to-action buttons, as it stands out from the rest and is easy to click on. In this article, we'll show you how to create a rounded shape button using CSS.

.rounded_button {
   padding: 1.2rem 2.5rem;
   font-size: 1rem;
   background: #207ef9;
   color: #fff;
   border-radius: 40px;
   border: 0;
   letter-spacing: 1px;
   cursor: pointer;
   outline: 0;
}

.rounded_button:hover {
   opacity: .9;
}

Using the above code you can create a simple rounded box styles button in CSS. We use the 'border-radius' property to make it rounded.

Was this helpful?