css pearls code example

Example: css pearls

<div class="container">
  <div id="traffic-light-pearls-glossy-effect" class="row col-12 mx-0 border border-secondary" style="height: 50%">
      <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>
      <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>
      <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>
  </div>
</div>

.traf_light{
  border: none;
}
.embossed {
  position: relative;
  z-index: 2;
}
.embossed:before {
	content: "";
	display: block;
	height: 106%;
	width: 106%;
	position: absolute;
	border-radius: 50%;
	top: -3%;
	bottom: 3%;
	right: 6%;
	
	left: 50%;
	transform: translateX(-50%);
	border-radius: 100%;
	opacity: 0.6;
	background: radial-gradient(closest-side, #ffffff,#484848,#0d0d0d );
}
.embossed:after {
  content: "";
  z-index: -1;
  position: absolute;
  border-radius: 50%;
  box-shadow: 
	inset 0 2px 0 rgba(0,0,0,0.1),
	inset 0 -2px 0 rgba(255,255,255,0.3);
  top: -10px; bottom: -10px;
  right: -10px; left: -10px;
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}