Open chat btn

by Andrey Izman

HTML

<div class="chat_btn" id="chat_show_btn" lang="title:chat_show" title="Відкрити online чат">
  <div class="chat_btn_anim">
    <div class="bubble1">
      <span class="bubble_text">
        <span></span>
        <span></span>
        <span></span>
      </span>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 23.6" style="enable-background:new 0 0 25 23.6;" xml:space="preserve">
        <path d="M25,2.7v11.9c0,1.5-1.2,2.7-2.8,2.7l0,0l-9.7,0.1l-5.7,6.2v-6.2h-4c-1.5,0-2.8-1.2-2.8-2.7 l0,0V2.8c0-1.5,1.2-2.7,2.8-2.7l0,0L22.3,0C23.8,0,25,1.2,25,2.7L25,2.7z"></path>
      </svg>
    </div>
    <div class="bubble2">
      <span class="bubble_text">
        <span></span>
        <span></span>
        <span></span>
      </span>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 23.6" style="enable-background:new 0 0 25 23.6;" xml:space="preserve">
        <path d="M0,2.7C0,1.2,1.2,0,2.7,0l19.5,0.1l0,0c1.6,0,2.8,1.2,2.8,2.7v11.9l0,0 c0,1.5-1.3,2.7-2.8,2.7h-4v6.2l-5.7-6.2l-9.7-0.1l0,0c-1.6,0-2.8-1.2-2.8-2.7L0,2.7L0,2.7z"></path>
      </svg>
    </div>
  </div>
  <span lang="chat_show">Відкрити online чат</span>
</div>

SCSS

body {
  background: #222;
  font-family: 'Roboto',Arial,sans-serif;
}

.chat_btn {
  position: fixed;
  z-index: 15;
  right: 15px;
  bottom: 15px;
  display: none;
  width: 58px;
  height: 58px;
  cursor: pointer;
  transition: background ease-out .2s;
  text-align: center;
  border-radius: 100%;
  background: #ef6e16;
  align-items: center;
  justify-content: center;
  animation: anim-grow 2s ease-in-out infinite;
}

@-webkit-keyframes anim-grow {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 110, 22, 0.4);
  }

  25% {
    box-shadow: 0 0 0 10px rgba(239, 110, 22, .4);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(239, 110, 22, 0);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(239, 110, 22, 0);
  }
}

.chat_btn:hover {
  background: #ff822e;
}

.chat_btn>span {
  display: none;
}

/* from layout.css (end) */

/* from response.css (start) */
//@media screen and (min-width: 768px) {
  .chat_btn {
    width: auto;
    height: auto;
    padding: 11px 25px 11px;
    color: #fff;
    border-radius: 4px;
    align-items: center;
  }

  .chat_btn .chat_btn_anim {
    margin: 6px 10px 0 0;
  }

  .chat_btn>span {
    display: block;
    font-size: 14px;
    font-weight: bold;
  }
//}

.chat_btn {
  color: rgb(232, 230, 227);
}

.chat_btn {
  background-image: initial;
  background-color: rgb(188, 84, 13);
}

//@media screen and (min-width: 1000px) {
  .chat_btn {
    display: flex;
  }
//}

/* from layout.css (start) */
.chat_btn_anim{
    position: relative;
    width: 30px;
    height: 30px;
    margin-top: 6px;
}

//@media screen and (min-width: 768px)
.chat_btn .chat_btn_anim {
    margin: 6px 10px 0 0;
}

.chat_btn_anim .bubble1,
.chat_btn_anim .bubble2{
    border-radius: 0;
    width: 20px;
    height: 24px;
    position: absolute;
}

.chat_btn_anim .bubble1{
    left: 0;
    bottom: 0;
    animation: bubble-replace1 4s ease-in-out infinite;
    fill: #fff;
}

.chat_btn_anim .bubble2{
    right: 0;
    top: 0;
    animation: bubble-replace2 4s ease-in-out infinite;
 ...