css pearls

1<div class="container">
2  <div id="traffic-light-pearls-glossy-effect" class="row col-12 mx-0 border border-secondary" style="height: 50%">
3      <div class="col-4 p-0 mx-0 d-flex justify-content-center align-items-center"><button type="button" class="traf_light embossed btn-danger rounded-circle btn-xl" style="height:50px;width:50px"></button></div>
4      <div class="col-4 p-0 mx-0 d-flex justify-content-center align-items-center"><button type="button" class="traf_light embossed btn-warning rounded-circle btn-xl" style="height:50px;width:50px"></button></div>
5      <div class="col-4 p-0 mx-0 d-flex justify-content-center align-items-center"><button type="button" class="traf_light embossed btn-success rounded-circle btn-xl" style="height:50px;width:50px"></button></div>
6  </div>
7</div>
8
9.traf_light{
10  border: none;
11}
12.embossed {
13  position: relative;
14  z-index: 2;
15}
16.embossed:before {
17	content: "";
18	display: block;
19	height: 106%;
20	width: 106%;
21	position: absolute;
22	border-radius: 50%;
23	top: -3%;
24	bottom: 3%;
25	right: 6%;
26	
27	left: 50%;
28	transform: translateX(-50%);
29	border-radius: 100%;
30	opacity: 0.6;
31	background: radial-gradient(closest-side, #ffffff,#484848,#0d0d0d );
32}
33.embossed:after {
34  content: "";
35  z-index: -1;
36  position: absolute;
37  border-radius: 50%;
38  box-shadow: 
39	inset 0 2px 0 rgba(0,0,0,0.1),
40	inset 0 -2px 0 rgba(255,255,255,0.3);
41  top: -10px; bottom: -10px;
42  right: -10px; left: -10px;
43  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
44}