JSFiddle - React, Tailwind, and code Playground

by Anatoly Kulikov

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<h1>Call-Кнопка Виджет с Подменю</h1>
<div class="call-widjet">
	<div class="ui-list">
		<a href="#phone" class="callbutton ui-tooltip phone" data-toggle="tooltip" data-placement="left" title="Позвонить"></a>
		<a href="#skype" class="callbutton ui-tooltip skype" data-toggle="tooltip" data-placement="left" title="Skype"></a>
		<a href="#whatsapp" class="callbutton ui-tooltip whatsap" data-toggle="tooltip" data-placement="left" title="Whatsapp"></a>
		<a href="#vkontakte" class="callbutton ui-tooltip vk" data-toggle="tooltip" data-placement="left" title="Вконтакте"></a>
		<a href="#telegram" class="callbutton ui-tooltip telegram" data-toggle="tooltip" data-placement="left" title="Telegram"></a>
	</div>
	<div class="callbutton pulse"><i class="ico"></i></div>
</div>

CSS

.call-widjet .telegram{background-color:#30A3E6;}
.call-widjet .telegram:hover{background-color:#167CB7;}
.call-widjet .vk{background-color:#4C73A4;}
.call-widjet .vk:hover{background-color:#3B5980;}
.call-widjet .whatsap{background-color:#37B725;}
.call-widjet .whatsap:hover{background-color:#2C931D;}
.call-widjet .skype{background-color:#00AFF0;}
.call-widjet .skype:hover{background-color:#008CC0;}
.call-widjet .phone{background-color:#37B725;}
.call-widjet .phone:hover{background-color:#2C931D;}
/* General CSS */
.call-widjet{position:fixed;bottom:0;right:0;}
.call-widjet .ui-list{position:absolute;bottom:120px;right:28px;height:0px;opacity:0}
/* Icons */
.call-widjet .ui-list a{text-decoration:none;display:block;width:45px;height:45px;line-height:45px;font-size:26px;border-radius:100%;text-align:center;color:#fff;margin:8px auto;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2)}
.call-widjet .ui-list a:hover{text-decoration:none;}
.pulse{background:#008E06;position:absolute;bottom:20px;right:20px;width:60px;height:60px;line-height:60px;border-radius:100%;text-align:center;font-size:30px;color:#fff;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2);-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;-moz-animation:pulse 1.25s infinite cubic-bezier(0.66,0,0,1);-webkit-animation:pulse 1.25s infinite cubic-bezier(0.66,0,0,1);animation:pulse 1.25s infinite cubic-bezier(0.66,0,0,1);}
.pulse.active{font-size:40px;line-height:60px;-moz-animation:none;-webkit-animation:none;animation:none;-webkit-box-shadow:none;box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;transform:rotate(45deg);}
.pulse:before,
.pulse:after{content:"";display:block;position:absolute;border:50%;border:1px solid #008E06;left:-20px;right:-20px;top:-20px;bottom:-20px;border-radius:50%;animation:animate 1.5s linear infinite;opacity:0;backface-visibility:hidden;}
.pulse:after{animation-delay:.5s;}
.pulse:hover{cursor:pointer;}

JavaScript

$(document).ready(function (){
	$(".callbutton").click(function (e){
		e.preventDefault();
		if (!($(this).hasClass("active"))){
			$(".ui-list").animate({
				height: "240px",
				opacity: "1",
				bottom: "120px"
			});
			$(this).addClass("active");
		} else {
			$(".ui-list").animate({
				height: "0px",
				opacity: "0",
				bottom: "-130px"
			});
			$(this).removeClass("active");
		}
	});
});