JSFiddle - React, Tailwind, and code Playground

by max3w

HTML

<!--Кнопка-->
<div class="osvaz">
<span class="vizovclose close">×</span>
<div id="vizov" class="callback"> 
	<span class="tooltiptext  tooltiptext1">У Вас є запитання?<br> Зв'яжіться з нами</span>	
		<div id="b3" class="email-bt">
    		<a href="viber://chat?number=%2B380xxxxxxxxx" target="_blank">
				<div class="text-call"><i></i>
		<span>Написати в Viber</span></div></a>
		</div>
		<div id="b1" class="email-bt">
    		<a class="tel" href="https://t.me/max3w" target="_blank">
			<div class="text-call">
			<i class="fa fa-mail" aria-hidden="true"></i>
			<span>Чат в Telegram</span>
			</div></a>
		</div>	
	<div class="text-call">
		<i class="fa fa-shat"></i>
		</div>
	</div></div>

CSS

.callback-bt{opacity:0;background:#38a3fd;border:2px solid #38a3fd;border-radius:50%;box-shadow:0 8px 10px rgba(56,163,253,.3);cursor:pointer;height:68px;text-align:center;width:68px;position:fixed;right:2%;bottom:69px;z-index:1;transition:.3s;-webkit-animation:hoverWave linear 1s infinite;animation:hoverWave linear 1s infinite}.callback-bt .text-call{height:68px;width:68px;border-radius:50%;position:relative}.callback-bt:hover i{display:none}.callback-bt:hover{z-index:1;color:transparent;transition:.3s}.callback-bt:hover i{color:#38a3fd;font-size:40px;transition:.3s}.callback-bt i{color:#fff;font-size:34px;transition:.3s;line-height:66px;transition:.5s ease-in-out}.callback-bt i{animation:1.2s ease 0s normal none 1 running shake;animation-iteration-count:infinite;-webkit-animation:1.2s ease 0s normal none 1 running shake;-webkit-animation-iteration-count:infinite}@-webkit-keyframes hoverWave{0%{box-shadow:0 8px 10px rgba(56,163,253,.3),0 0 0 0 rgba(56,163,253,.2),0 0 0 0 rgba(56,163,253,.2)}40%{box-shadow:0 8px 10px rgba(56,163,253,.3),0 0 0 15px rgba(56,163,253,.2),0 0 0 0 rgba(56,163,253,.2)}80%{box-shadow:0 8px 10px rgba(56,163,253,.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,.067)}100%{box-shadow:0 8px 10px rgba(56,163,253,.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0)}}@keyframes hoverWave{0%{box-shadow:0 8px 10px rgba(56,163,253,.3),0 0 0 0 rgba(56,163,253,.2),0 0 0 0 rgba(56,163,253,.2)}40%{box-shadow:0 8px 10px rgba(56,163,253,.3),0 0 0 15px rgba(56,163,253,.2),0 0 0 0 rgba(56,163,253,.2)}80%{box-shadow:0 8px 10px rgba(56,163,253,.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,.067)}100%{box-shadow:0 8px 10px rgba(56,163,253,.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0)}}@keyframes...

JavaScript

jQuery(document).ready(function($){
  document.querySelector('.vizovclose').onclick = function() {
  document.querySelector('.osvaz').classList.add('hidden');
}
	document.querySelector('.fa-shat').onclick = function() {
  document.querySelector('.callback').classList.toggle('open');}
	document.querySelector('.tooltiptext').onclick = function() {
  document.querySelector('.callback').classList.toggle('open');}});