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

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 2

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>