Search code snippets, questions, articles...

Create rounded shape style 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;
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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

Live demo

Was this helpful?