CSS3 Moon Shape

Question

I am trying to create a button like this:

I do not know how to create a light moon shape at the top of the button.

This is still far: Fiddle Demo .

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

Answer 1

With a small inset you can create a shadow on top of the object.

eg. 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

While the box-shadow approach is good, it cannot make an elliptical section on the Moon, as in the image in question. The cutout is round and has the same radius as the circle of the container.

If an elliptical section is required, we can either use 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 3

Here is an svg solution that uses a linear gradient.
An arrow is added because it looks more like a button: 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>