CSS Android Camera Icon

CSS Android Camera Icon

HTML
<div class="icon">
    <div class="small-circle"></div>
    <div class="firstCameraCircle centered">
       <div class="secondCameraCircle centered">
           <div class="thirdCameraCircle centered"></div>
       <div>
    <div>
</div>
        
CSS
body {
  background: #a3c0ef;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.centered {
  display: flex;
  align-items: center; 
  justify-content: center;
}

.icon {
  position: relative;
  background: #fafafa;
  width: 100px;
  height: 100px;
  border-radius: 30px; 
  display: flex;
  align-items: center; 
  justify-content: center;
  
}

.firstCameraCircle {
  background: #cad1e5;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.secondCameraCircle {
   background: #7386bf;
   width: 40px;
   height: 40px;
   border-radius: 50%;
}

.thirdCameraCircle {
   background: #4c5ba3;
   width: 20px;
   height: 20px;
   border-radius: 50%;
}

.small-circle{ 
  position: absolute;
  top: 15px;
  left: 15px;
  background: #4f557d;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

301 Views
84280cookie-checkCSS Android Camera Icon

Leave a Reply

Your email address will not be published. Required fields are marked *