CSS Battle - #3 Push Button

<div class="wide-box"> <div class="circular-outer"></div> <div class="circular-inner"></div> </div> 

 body { background: #6592CF; display: flex; align-items: center; justify-content: center; } .wide-box { width: 78%; display: flex; align-items: center; justify-content: center; background: #243D83; z-index: -1; overflow: hidden; position: relative; } .circular-outer { width: 250px; height: 250px; border-radius: 50%; background: #6592CF; position: absolute; } .circular-inner { width: 150px; height: 150px; border-radius: 50%; background: #243D83; position: relative; overflow: hidden; } .circular-inner::after { position: absolute; content: ''; width: 50px; height: 50px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #EEB850; border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; }