<div class="container">
 <div class="left-side">
  <div class="smile">
   <div class="eyes"></div>
   <div class="mouth"></div>
  </div>
  <div class="talk">
   <div class="triangle"></div>
   <svg class="star" xmlns="http://www.w3.org/2000/svg" height="512" viewBox="0 -10 511.991 511" width="512">
    <path d="M510.652 185.883a27.177 27.177 0 00-23.402-18.688l-147.797-13.418-58.41-136.75C276.73 6.98 266.918.497 255.996.497s-20.738 6.483-25.023 16.53l-58.41 136.75-147.82 13.418c-10.837 1-20.013 8.34-23.403 18.688a27.25 27.25 0 007.937 28.926L121 312.773 88.059 457.86c-2.41 10.668 1.73 21.7 10.582 28.098a27.087 27.087 0 0015.957 5.184 27.14 27.14 0 0013.953-3.86l127.445-76.203 127.422 76.203a27.197 27.197 0 0029.934-1.324c8.851-6.398 12.992-17.43 10.582-28.098l-32.942-145.086 111.723-97.964a27.246 27.246 0 007.937-28.926zM258.45 409.605" data-original="#000000" class="active-path" data-old_color="#000000" fill="#D74E68" /></svg>
  </div>
  <div class="friend">
   <div class="shock"></div>
  </div>
 </div>
 <div class="right-side">
  <div class="refer">Refer Friends</div>
  <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 451.846 451.847">
   <path d="M345.441 248.292L151.154 442.573c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744L278.318 225.92 106.409 54.017c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.287 194.284c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#cfcfcf" /></svg>
 </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');

:root {
 --background: #d74e68;
 --left-side: #ff9568;
 --smile: #ffe073;
 --star: #d74e68;
 --arrow: cfcfcf;
}

html {
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
}

body {
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 width: 100%;
 background: var(--background);
}

.container {
 background-color: #ffffff;
 display: flex;
 width: 460px;
 height: 120px;
 position: relative;
 border-radius: 6px;
 transition: 0.3s ease-in-out;
 &:hover {
  transform: scale(1.04);
 }
}
 
 .left-side {
 background-color: var(--left-side);
 width: 130px;
 height: 120px;
 border-radius: 6px;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 transition: 0.3s;
 overflow: hidden;
}

.right-side {
 width: calc(100% - 130px);
 display: flex;
 align-items: center;
 overflow: hidden;
 cursor: pointer;
 justify-content: space-between;
 white-space: nowrap;
 transition: 0.3s;
 border-radius: 6px;
 &:hover {
  background-color: #f9f7f9;
 }
}

.arrow {
 width: 20px;
 height: 20px;
 margin-right: 20px;
}

.refer {
 font-size: 23px;
 font-family: "Lexend Deca", sans-serif;
 margin-left: 20px;
}

.smile {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background-color: var(--smile);
 position: absolute;
 display: flex;
 align-items: center;
 -webkit-box-shadow: 2px 5px 10px -2px rgba(0,0,0, .2);
}

.eyes {
  width: 6px;
  height: 10px;
  position: absolute;
  box-shadow: -15px 0 0 0 #000, 15px 0 0 0 #000;
  border-radius: 50%;
  left: 27px;
  top: 20px;
}

.mouth {
 width: 36px;
 height: 18px;
 background-color: #000;
 position: absolute;
 border-radius: 0 0 60px 60px;
 top: 35px;
 left: 12px;
}

.container:hover {
  & .smile {
 animation: slide-cross .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 & .eyes, & .mouth {
  animation: slide-bottom .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 & .talk {
  animation: scale-up .4s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
 }
 & .star {
   animation: turning .5s ease-in-out .5s both;
 }
 & .friend {
  animation: slide-in .7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
 }
 & .shock {
  animation: wow .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s both;
 }
}

@keyframes wow {
 0% {
  transform: scale(.9);
 }
  100% {
         transform: scale(1.2);
 }
}

@keyframes slide-in {

  100% {
   right: -45px;
   top: 35px;
  }
}


@keyframes turning {
  0% {
       transform: rotate(-160deg) scale(0);
       opacity: 0;   
  }
  85% {
        transform: rotate(0) scale(1.5);
        opacity: 1;
  } 
  100% {
        transform: rotate(0) scale(1);
        opacity: 1;
  }
}

@keyframes scale-up {
  0% {
         transform: scale(0.6);
         transform-origin: 100% 100%;       
  }
  100% {
         transform: scale(1);
         transform-origin: 100% 100%;
         opacity: 1;
  }
}

@keyframes slide-cross {
  0% {
       transform: translateY(0) translateX(0);
  }
  100% {
       transform: translateY(-38px) translateX(-41px);
  }
}

@keyframes slide-bottom {
  0% {
         transform: translateY(0) translateX(0);
  }
  100% {
         transform: translateY(1px) translateX(5px);
  }
}

.talk {
 width: 56px;
 height: 40px;
 border-radius: 10px;
 background-color: #fff;
 position: absolute;
 z-index: 10;
 bottom: 34px;
 left: 33px;
 opacity: 0;
}

.triangle {
 position: absolute;
  background-color: #fff;
 top: -9px;
 left: 8px;
}
.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
  width:  12px;
  height: 12px;
  border-top-right-radius: 35%;
}

.triangle {
  transform: rotate(-85deg) skewX(-30deg) scale(1,.866);
  &:before {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414)   translate(50%);
 }
}

.star {
 width: 18px;
 height: 18px;
 position: absolute;
 left: 20px;
 top: 10px;
}

.friend {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background-color: var(--smile);
 position: relative;
 right: -85px;
 top: 85px;
 z-index: 15;
 box-shadow: 2px 5px 10px -2px rgba(0,0,0, .2);
 &:before {
  content: '';
  width: 6px;
  height: 10px;
  position: absolute;
  box-shadow: -15px 0 0 0 #000, 15px 0 0 0 #000;
  border-radius: 50%;
  left: 24px;
  top: 18px;
 }
}

.shock {
 width: 12px;
 height: 12px;
 background-color: #000;
 position: absolute;
 border-radius: 50%;
 top: 34px;
 right: 28px;
 will-change: transform;
}

@media only screen and (max-width: 480px) {
 .container {
  transform: scale(0.7);
  &:hover {
   transform: scale(0.74);
  }
 }
 .refer {
  font-size: 18px;
 }
}