CODEWITHSUNDEEP
htmlcss
dev1236541
dev1236541

Reputation: 11

CSS Button Border Rounded Shape inline

I am trying to create a button which looks like following.

Button

So far I added this styling, but it does not equal to the button from the image, I am not able to make the box shadow rounded inside the div. And I am not sure if the box shadow is even the correct way of doing this.

#custom-button {
  background: red;
  border-radius: 25;
  border: 0;
  height: 48;
  padding: 0 30px;
  box-shadow: 0 3px 0px 3px rgba(27, 215, 203);
}
<button type="button" id="custom-button">Custom Button</button>

Upvotes: 0

Views: 1058

Answers (1)

dantheman
dantheman

Reputation: 3814

I think this is close to what you are looking for. I had to add an extra span inside the button to get all the elements though. You'll need to adjust some of the values to get it more to your liking.

button {
  width: 200px;
  height: 60px;
  border-radius: 60px;
  border: none;
  position: relative;
}
button:after {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  width: calc(100% - 8px);
  height: 50%;
  border: 8px solid red;
  border-bottom: 0;
  border-radius: 35px 35px 0 0;
}
button span:before, button span:after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: red;
  top: calc(50% + 4px);
  z-index: 1;
}
button span:after {
  left: -4px;
}
button span:before {
  right: -4px;
}
<button>
  <span></span>
  test
</button>

Edit - border bottom version

button {
  width: 200px;
  height: 60px;
  border-radius: 60px;
  border: none;
  position: relative;
}
button:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -4px;
  width: calc(100% - 8px);
  height: 50%;
  border: 8px solid red;
  border-top: 0;
  border-radius: 0 0 35px 35px;
}
button span:before, button span:after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: red;
  bottom: calc(50% + 4px);
  z-index: 1;
}
button span:after {
  left: -4px;
}
button span:before {
  right: -4px;
}

<button>
  <span></span>
  test
</button>

Upvotes: 1

Related Questions