<div class="camera">
  <div class="camera__btn"></div>
    <div class="camera__circle camera__circle--first">
       <div class="camera__circle camera__circle--second">
          <div class="camera__circle camera__circle--third"></div>
       </div>
    </div>
</div>
body {
  background: #a3c0ef;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.camera {
  background: #fafafa;
  border-radius: 40px;
  display: flex;
  align-items: center; 
  justify-content: center;
  height: 200px;
  width: 200px;
  position: relative;
  
  &__btn {
    background: #4f557d;
    border-radius: 50%;
    height: 7px;
    width: 7px;
    position: absolute;
    left: 20px;
    top: 20px;
  }
  
  &__circle {
    display: flex;
    align-items: center; 
    justify-content: center;
    
    &--first { 
      background: #cad1e5;
      border-radius: 50%;
      height: 120px;
      width: 120px;
    }
    
    &--second {
      background: #7386bf;
      border-radius: 50%;
      height: 80px;
      width: 80px;
    }
    
    &--third {
      background: #4c5ba3;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.