<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
This Pen doesn't use any external JavaScript resources.