How to create buttons with circle mold in CSS

Question

I am currently trying to recreate the following PNG into HTML/CSS

The finished product is supposed to look just like this- 3 buttons spaced evenly in a circle "mold" (If you look around the element's border, you can see how they outline a circle.)

How can I recreate this in CSS/HTML?

One solution would be to use clip-path, but I don't know how to create a path for them. Another solution would be to just use images as backgrounds, but that has problems of its own.

ps. it can't be replicated with border-radius either

Thanks!

Answer 1

You can use clip-path with a circle shape and the trick is to make sure the 3 circles will overlap:

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  background:#c1ab32;
  color:#fff;
  margin:10px 0;
}

.box button:first-child {
  /* we offset by half the height and the margin*/
  clip-path:circle(120px at 50% calc(100% + 20px + 25px));
}
.box button:nth-child(2) {
  /* circle with radius of 120px at the center*/
  clip-path:circle(120px at 50% 50%);
}

.box button:last-child {
  clip-path:circle(120px at 50% calc(0% - 20px - 25px));
}

body {
 background:pink;
}

<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>

A similar idea is to color the background with a radial-gradient and you make sure it's the same circle too:

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  color:#fff;
  margin:10px 0;
}

.box button:first-child {
  background:radial-gradient(circle 120px at 50% calc(100% + 20px + 25px),#c1ab32 99%,transparent 100%);
}
.box button:nth-child(2) {
 background:radial-gradient(circle 120px at 50% 50%,#c1ab32 99%,transparent 100%)
}

.box button:last-child {
  background:radial-gradient(circle 120px at 50% calc(0% - 20px - 25px),#c1ab32 99%,transparent 100%)
}

body {
 background:pink;
}

<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>

You can also apply the clip-path to the container:

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
  border:1px solid;
  clip-path:circle(120px at 50% 50%);
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  background:#c1ab32;
  color:#fff;
}

.box button:nth-child(2) {
  margin:20px 0;
}

body {
 background:pink;
}

<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>