CSS3 moon shape

Question

I am trying to create a button like this:

I dont know how to create a light moon shape over the top of the button.

This is still far off: Fiddle Demo.

.moon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   box-shadow: 15px 15px 0 0 green;
}

Answer 1

While the box-shadow approach is good, it can't produce an elliptical cut on the moon like in the image provided in question. The cut is circular and has the same radius as the container circle.

If an elliptical cut is required then we could either use an pseudo-element (or) radial gradients.

Using Pseudo-element:

.moon {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 3px solid rgb(29, 27, 28); /*this can sometimes create a background bleed */  
  background: rgb(161, 159, 160);
  background-clip: content-box; /* to prevent the background bleed */
  box-shadow: inset 0px 0px 0px 1px rgb(29,27,28); /* to prevent the background bleed */
  overflow: hidden;
}
.moon:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 120%;
  top: 40%;
  left: -12.5%;
  background: rgb(35, 31, 32);
  border-radius: 60%/50%;
}
body {
  background: rgb(7, 5, 6);
}

<div class='moon'></div>

---

Using Radial Gradients:

.moon{
  height: 50px;
  width: 50px;
  background: radial-gradient(ellipse farthest-corner at 33% 100%, rgb(35, 31, 32) 45%, rgb(161, 159, 160) 47%);
  background-size: 150% 100%;
  border: 3px solid rgb(29, 27, 28);
  border-radius: 50%;
}
body {
  background: rgb(7, 5, 6);
}

<div class='moon'></div>

Answer 2

With just a little inset you can style the shadow on top of the object.

E.g. Crescent shape.

And, This is the button you want.

.moon {
  background-color: #222;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #222;
  /* I set 2 shadows where the first one doesn't have blur and spread for firefox fix. */
  box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
  -moz-box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
}

<div class="moon"></div>

Answer 3

Here is a svg solution that uses a lineargradient.
Added the arrow because it looks more like a button that way :D

#play {
  fill: white;
}
#Play:hover {
  stroke: firebrick;
  stroke-width: 2;
}

<h1>Svg solution</h1>
<svg viewBox="0 0 100 100" width="75px" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient x1="0" x2="0" y1="0" y2="1" id="LinearGradient1">
      <stop offset="0%" stop-color="white" stop-opacity="1" />
      <stop offset="50%" stop-color="black" stop-opacity="1" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="45" fill="url(#LinearGradient1)" stroke="black" stroke-width="5"></circle>
  <polygon id="Play" points="40,30 40,70 70,50 40,30" fill="white" />
</svg>