CSS Emoji Icons

CSS Emoji Icons

HTML
<div class="icon">
  <div class="emoji">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="mouth">
       <div class="tongue"></div>
    </div>
  </div>
</div>
CSS
.icon{
  background: #FFF; 
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -webkit- box-shadow: 0px 1px 7px 7px rgba(221, 221, 221, 0.81);
  box-shadow: 0px 1px 7px 7px rgba(221, 221, 221, 0.81);
  display: flex;
  justify-content: center;
  align-items: center;
}

.emoji{ 
   background: #fada7e;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   position: relative;
}

.emoji .left-eye{
    border-radius: 50%;
    border-width: 6px 0px 0px 0px;
    border-style: solid;
    border-color: #4d4d4d;
    padding: 3px;
    width: 10px;
    position :absolute; 
    left: 15px;
    top: 20px;
}

.emoji .right-eye{
    border-radius: 50%;
    border-width: 6px 0px 0px 0px;
    border-style: solid;
    border-color: #4d4d4d;
    padding: 3px;
    width: 10px;
    position :absolute; 
    right: 15px;
    top: 20px;
}

.emoji .mouth{
    border-bottom-left-radius: 90px;
    border-bottom-right-radius: 90px;
    height: 15px;
    width: 30px;
    background: #bc554f;
    position: absolute;
    bottom: 10px;
    left: 15px;  
}

.emoji .tongue{
   background: #FA645A;
   width: 15px;
   height: 15px; 
   border-bottom-left-radius: 50%;
   border-bottom-right-radius: 50%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
}
Gradient Instagram Logo
HTML
<div class="icon">
  <div class="emoji">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="mouth">
         <div class="tongue"></div>
    </div>
  </div>
</div>
CSS
.emoji .left-eye{
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: #4d4d4d;
    padding: 3px;
    width: 10px;
    position :absolute; 
    left: 15px;
    top: 20px;
}

.emoji .right-eye{
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: #4d4d4d;
    padding: 3px;
    width: 10px;
    position :absolute; 
    right: 15px;
    top: 20px;
}

.emoji .mouth{
    border-bottom-left-radius: 90px;
    border-bottom-right-radius: 90px;
    height: 15px;
    width: 30px;
    background: #bc554f;
    position: absolute;
    bottom: 10px;
    left: 15px;  
}

.emoji .tongue{
   background: #FA645A;
   width: 15px;
   height: 15px; 
   border-bottom-left-radius: 50%;
   border-bottom-right-radius: 50%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
}
Gradient Instagram Logo
814 Views
54900cookie-checkCSS Emoji Icons

Leave a Reply

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