CodePen

HTML

            
              <div class="wrap">

<div class="camera">
  <div class="btn">
    <div class="btnshade"></div>
  </div>
  <div class="topridge"></div>
  <div class="lensflare"></div>
  <div class="lensshadow"></div>
  <div class="outerlens"><div>
    <div class="lens1shade">
      <div class="lens1">
        <div class="lens2">
          <div class="lens3">
            <div class="lens4">
              <div class="lens5">
                <div class="flare"></div>
                <div class="flare2"></div>
              </div>
            </div>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>
  
 </div>
            
          
!

CSS

            
              * {
  position: relative;
}

body {
  background: #cce9e9;
}

.wrap {
  width: 150px;
  height: 150px;
  margin: 6% auto;
}

.camera {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-radius: 40px;
  box-shadow: 0px 2px 3px #aec7c7;
  background-color: #fbfbfb;
  z-index: -100;
}

.topridge {
  position: absolute;
  width: 192px;
  height: 192px;
  margin: 4px 3px;
  border-radius: 36px;
  /* box-shadow: 0 -4px #fff; */
}

.redstripe {
  position: absolute;
  width: 194px;
  height: 20px;
  background: #fd7e7e;
  margin: 60px 0 0 0;
  border-left: 3px solid #ed7576;
  border-right: 3px solid #ed7576;
  z-index: -50;
  opacity: 0.9;
}


.outerlens {
  float: left;
  width: 140px;
  height: 140px;
  margin: 30px;
  border-radius: 100%;
  /* -- */
  background-color: #eaeaea;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(234, 234, 234)), to(rgb(255, 255, 255)));
  background-image: -webkit-linear-gradient(top, rgb(234, 234, 234), rgb(255, 255, 255));
  background-image: -moz-linear-gradient(top, rgb(234, 234, 234), rgb(255, 255, 255));
  background-image: -o-linear-gradient(top, rgb(234, 234, 234), rgb(255, 255, 255));
  background-image: -ms-linear-gradient(top, rgb(234, 234, 234), rgb(255, 255, 255));
  background-image: linear-gradient(top, rgb(234, 234, 234), rgb(255, 255, 255));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#eaeaea', EndColorStr='#ffffff');
}

.lensshadow {
  position: absolute;
  left: 0;
  width: 108px;
  height: 90px;
  border-radius: 100%;
  margin: 40px 46px;
  z-index: 100;
  /* -- */
  /*background-color: #ececfe;*/
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(236, 236, 254, 0.67)), to(rgba(252, 255, 250, 0.00)));
  background-image: -webkit-linear-gradient(top, rgba(236, 236, 254, 0.67), rgba(252, 255, 250, 0.00));
  background-image: -moz-linear-gradient(top, rgba(236, 236, 254, 0.67), rgba(252, 255, 250, 0.00));
  background-image: -o-linear-gradient(top, rgba(236, 236, 254, 0.67), rgba(252, 255, 250, 0.00));
  background-image: -ms-linear-gradient(top, rgba(236, 236, 254, 0.67), rgba(252, 255, 250, 0.00));
  background-image: linear-gradient(top, rgba(236, 236, 254, 0.67), rgba(252, 255, 250, 0.00));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ececfe', EndColorStr='#fcfffa');


}

.lensflare {
  position: absolute;
  left: 0;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  z-index: 50;
  margin: 25px;
  /* -- */
   /*background-color: #a48cdc;*/
  background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgba(254, 255, 255, 0.23)), to(rgba(164, 140, 220, 0.85)));
  background-image: -webkit-radial-gradient(50% 50%, rgba(164, 140, 220, 0.85), rgba(254, 255, 255, 0.23));
  background-image: -moz-radial-gradient(50% 50%, rgba(164, 140, 220, 0.85), rgba(254, 255, 255, 0.23));
  background-image: -o-radial-gradient(50% 50%, rgba(164, 140, 220, 0.85), rgba(254, 255, 255, 0.23));
  background-image: -ms-radial-gradient(50% 50%, rgba(164, 140, 220, 0.85), rgba(254, 255, 255, 0.23));
  background-image: radial-gradient(50% 50%, rgba(164, 140, 220, 0.85), rgba(254, 255, 255, 0.23));
  box-shadow: 0px 10px 10px rgba(208, 205, 217, 0.2)
}

.lens1shade {
  float: left;
  width: 128px;
  height: 128px;
  margin: 6px;
  border-radius: 100%;
  /* -- */
  background-color: #9fbfc9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(159, 191, 201)), to(rgb(188, 231, 248)));
  background-image: -webkit-linear-gradient(top, rgb(159, 191, 201), rgb(188, 231, 248));
  background-image: -moz-linear-gradient(top, rgb(159, 191, 201), rgb(188, 231, 248));
  background-image: -o-linear-gradient(top, rgb(159, 191, 201), rgb(188, 231, 248));
  background-image: -ms-linear-gradient(top, rgb(159, 191, 201), rgb(188, 231, 248));
  background-image: linear-gradient(top, rgb(159, 191, 201), rgb(188, 231, 248));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9fbfc9', EndColorStr='#bce7f8');  
}

.lens1 {
  float: left;
  width: 124px;
  height: 124px;
  margin: 2px;
  border-radius: 100%;
  /* -- */
  background-color: #a8dcef;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(168, 220, 239)), to(rgb(188, 231, 248)));
  background-image: -webkit-linear-gradient(top, rgb(168, 220, 239), rgb(188, 231, 248));
  background-image: -moz-linear-gradient(top, rgb(168, 220, 239), rgb(188, 231, 248));
  background-image: -o-linear-gradient(top, rgb(168, 220, 239), rgb(188, 231, 248));
  background-image: -ms-linear-gradient(top, rgb(168, 220, 239), rgb(188, 231, 248));
  background-image: linear-gradient(top, rgb(168, 220, 239), rgb(188, 231, 248));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#a8dcef', EndColorStr='#bce7f8');
}

.lens2 {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin: 12px;
  /* -- */
  background-color: #90daf6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(144, 218, 246)), to(rgb(168, 225, 247)));
  background-image: -webkit-linear-gradient(top, rgb(144, 218, 246), rgb(168, 225, 247));
  background-image: -moz-linear-gradient(top, rgb(144, 218, 246), rgb(168, 225, 247));
  background-image: -o-linear-gradient(top, rgb(144, 218, 246), rgb(168, 225, 247));
  background-image: -ms-linear-gradient(top, rgb(144, 218, 246), rgb(168, 225, 247));
  background-image: linear-gradient(top, rgb(144, 218, 246), rgb(168, 225, 247));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#90daf6', EndColorStr='#a8e1f7');
}

.lens3 {
  float: left;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  margin: 5px;
  /* -- */
  background-color: #6991a3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(105, 145, 163)), to(rgb(130, 160, 173)));
  background-image: -webkit-linear-gradient(top, rgb(105, 145, 163), rgb(130, 160, 173));
  background-image: -moz-linear-gradient(top, rgb(105, 145, 163), rgb(130, 160, 173));
  background-image: -o-linear-gradient(top, rgb(105, 145, 163), rgb(130, 160, 173));
  background-image: -ms-linear-gradient(top, rgb(105, 145, 163), rgb(130, 160, 173));
  background-image: linear-gradient(top, rgb(105, 145, 163), rgb(130, 160, 173));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6991a3', EndColorStr='#82a0ad');
  -webkit-box-shadow: inset 0px 2px 4px 1px rgba(62, 68, 143, 1);
  box-shadow: inset 0px 2px 4px 1px rgba(62, 68, 143, 0.6);
}

.lens4 {
  float: left;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  margin: 15px;
  /* -- */
  background-color: #5d7683;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(93, 118, 131)), to(rgb(128, 149, 160)));
  background-image: -webkit-linear-gradient(top, rgb(93, 118, 131), rgb(128, 149, 160));
  background-image: -moz-linear-gradient(top, rgb(93, 118, 131), rgb(128, 149, 160));
  background-image: -o-linear-gradient(top, rgb(93, 118, 131), rgb(128, 149, 160));
  background-image: -ms-linear-gradient(top, rgb(93, 118, 131), rgb(128, 149, 160));
  background-image: linear-gradient(top, rgb(93, 118, 131), rgb(128, 149, 160));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#5d7683', EndColorStr='#8095a0');
  -webkit-box-shadow: inset 0px 2px 4px 1px rgba(9, 37, 79, 1);
  box-shadow: inset 0px 2px 3px 0px rgba(9, 37, 79, 0.5);
}


.lens5 {
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  margin: 15px;
  /* -- */
  background: #44545e;
}

.flare, .flare2 {
  position: absolute;
  right: 0;
  width: 7px;
  height: 7px;
  margin: 10px 5px 0px 5px;
  border-radius: 100%;
  background: #fff;
  opacity: 0.5;
}

.flare2 {
  left: 0;
  width: 5px;
  height: 5px;
  margin: 18px 0px 0px 13px;
}

.bubble {
  position: relative;
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0;
  /* -- */
  background-color: #b9dcf4;
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgb(185, 220, 244)),     to(rgb(68, 84, 94)));
  background-image: -webkit-linear-gradient(left top, rgb(185, 220, 244), rgb(68, 84, 94));
  background-image: -moz-linear-gradient(left top, rgb(185, 220, 244), rgb(68, 84, 94));
  background-image: -o-linear-gradient(left top, rgb(185, 220, 244), rgb(68, 84, 94));
  background-image: -ms-linear-gradient(left top, rgb(185, 220, 244), rgb(68, 84, 94));
  background-image: linear-gradient(left top, rgb(185, 220, 244), rgb(68, 84, 94));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#b9dcf4',   EndColorStr='#44545e');

}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Inspiration credits: http://drbl.in/hNww
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................