SOURCE

<svg height="200" width="900">
  <defs>
    <radialGradient id="red" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgba(255,255,255,0);" />
      <stop offset="100%" style="stop-color:rgba(255,0,0,0.5);" />
    </radialGradient>
     <radialGradient id="yellow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255,0);" />
      <stop offset="100%" style="stop-color:#fab314;" />
    </radialGradient>
     <radialGradient id="green" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255,0);" />
      <stop offset="100%" style="stop-color:#34AA44;" />
    </radialGradient>
     <radialGradient id="green_dark" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgba(255,255,255,0);" />
      <stop offset="59%" style="stop-color:rgba(255,255,255,0);" />
      <stop offset="100%" style="stop-color:#34AA44;" />
    </radialGradient>
  </defs>
  <circle cx="200" cy="70" r="4"  fill="#e6492d"  />
  <circle cx="200" cy="70" r="8"  fill="url(#red)" />

   <circle cx="200" cy="90" r="4"  fill="#fab314"  />
  <circle cx="200" cy="90" r="8"  fill="url(#yellow)" />

   <circle cx="200" cy="110" r="4"  fill="#34AA44"  />
  <circle cx="200" cy="110" r="8"  fill="url(#green)" />

   <circle cx="200" cy="130" r="4"  fill="#34AA44"  />
  <circle cx="200" cy="130" r="8"  fill="url(#green_dark)" />
</svg>

<button class="aa"></button>

.aa{
    height: 16px;
    width:16px;
    border-radius: 8px;
    border:none;
    /* fill: url(#green) */
    position: relative;
    background: radial-gradient(circle at center, rgba(255,255,255,0) 0%,rgba(255,0,0,0.5) 100%);
}
.aa::after{
    content:"";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #e6492d;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(50%,50%);

    
}