Botão Duplo. No exemplo utilizei botões de telefone fixo e whatsapp.

fontend.css

/* CHAT WHATSAPP */
#chatWhatsapp2 { position: fixed; bottom: 90px; right: 2%; cursor: pointer; z-index: 200; }
#chatWhatsapp2 #btn { display: table; background: #294c04; color: #fff; text-align: center; border-radius: 100%; position: relative; font-size: 30px; z-index: 2; }
#chatWhatsapp2 #btn i { }
#chatWhatsapp2 #btn i.fa-whatsapp { line-height: 70px; width: 70px; }
#chatWhatsapp2 #callto { -webkit-animation: slide-down .3s ease-out; -moz-animation: slide-down .3s ease-out; position: absolute; display: none; overflow: hidden; bottom: 130%; bottom: 0; right: 0; width: 298px; height: auto; font-size: 18px; z-index: 5; }
#chatWhatsapp2 #callto a { display: block; width: 100%; height: auto; color: #fff; text-decoration: none; margin: 10px 0 0; padding: 0 8%; line-height: 30px; border-radius: 10px; text-align: left; position: relative; }
#chatWhatsapp2 #callto a:last-of-type { border-bottom: none; }
#chatWhatsapp2 #callto a i { font-size: 30px; line-height: 70px; width: 70px; background: #3f853b; text-align: center; border-radius: 100px; }
#chatWhatsapp2 #callto a span { font-size: 16px; font-style: italic; margin: 0 -40px 0 0; background: #292929; line-height: 40px; display: inline-flex; min-width: 200px; padding: 0 20px; border-radius: 20px; }
#chatWhatsapp2:hover #callto { }
#chatWhatsapp2 #btn:hover #callto { }
#chatWhatsapp2 #callto i.fa-times { z-index: 2; font-size: 30px; line-height: 30px; display: none; color: #fff; text-align: right; padding: 10px 20px; }
#chatWhatsapp2 #callto i.fa-times:hover { color: #f3be55; }
#chatWhatsapp2 #callto.chatActive i.fa-times { display: block; }
#chatWhatsapp2 #callto a:hover span { background: #e8ae43; color: #fff; }

/* CHAT PHONE */
#chatPhone2 { position: fixed; bottom: 170px; right: 2%; cursor: pointer; z-index: 100; }
#chatPhone2 #btn { display: table; background: #294c04; color: #fff; text-align: center; border-radius: 100%; position: relative; font-size: 30px; z-index: 2; }
#chatPhone2 #btn i { }
#chatPhone2 #btn i[class*="phone"] { line-height: 70px; width: 70px; }
#chatPhone2 #callto { -webkit-animation: slide-down .3s ease-out; -moz-animation: slide-down .3s ease-out; position: absolute; display: none; overflow: hidden; bottom: 130%; bottom: 0; right: 0; width: 298px; height: auto; font-size: 18px; z-index: 5; }
#chatPhone2 #callto a { display: block; width: 100%; height: auto; color: #fff; text-decoration: none; margin: 10px 0 0; padding: 0 8%; line-height: 30px; border-radius: 10px; text-align: left; position: relative; }
#chatPhone2 #callto a:last-of-type { border-bottom: none; }
#chatPhone2 #callto a i { font-size: 30px; line-height: 70px; width: 70px; background: #0e300c; text-align: center; border-radius: 100px; }
#chatPhone2 #callto a span { font-size: 16px; font-style: italic; margin: 0 -40px 0 0; background: #292929; line-height: 40px; display: inline-flex; min-width: 200px; padding: 0 20px; border-radius: 20px; }
#chatPhone2:hover #callto { }
#chatPhone2 #btn:hover #callto { }
#chatPhone2 #callto i.fa-times { z-index: 2; font-size: 30px; line-height: 30px; display: none; color: #fff; text-align: right; padding: 10px 20px; }
#chatPhone2 #callto i.fa-times:hover { color: #f3be55; }
#chatPhone2 #callto.chatActive i.fa-times { display: block; }
#chatPhone2 #callto a:hover span { background: #e8ae43; color: #fff; }

frontend.js

	
//TOGGLE CHAT PHONE
$(function(){
  $("#chatPhone2 #btn i[class*='phone']").click(function(e){
    e.preventDefault();
    el = $("#chatPhone2 #callto");
    $(el).toggle();
    $("#chatPhone2 #callto").toggleClass("chatActive");
    $("#chatWhatsapp2 #callto").removeClass("chatActive");
	  $("#chatWhatsapp2 #callto").hide();
  });
});

	$("#chatPhone2 #callto i.fa-times").click(function(){
  $("#chatPhone2 #callto").removeClass("chatActive");
  $("#chatPhone2 #callto").hide();
});

//TOGGLE CHAT WHATSAPP
$(function(){
 Â $("#chatWhatsapp2 #btn i[class*='whatsapp']").click(function(e){
    e.preventDefault();
    el = $("#chatWhatsapp2 #callto");
    $(el).toggle();
    $("#chatWhatsapp2 #callto").toggleClass("chatActive");
      $("#chatPhone2 #callto").removeClass("chatActive");
    $("#chatPhone2 #callto").hide();
  });
});

$("#chatWhatsapp2 #callto i.fa-times").click(function(){
  $("#chatWhatsapp2 #callto").removeClass("chatActive");
  $("#chatWhatsapp2 #callto").hide();
});

whatsapp.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<div id="chatWhatsapp2">
	<div id="btn" style="background-color: #0e843a"> 
		<i class="fab fa-whatsapp" aria-hidden="true"></i>    
	</div>
	<div id="callto">
		<i class="fas fa-times" aria-hidden="true"></i> 
		<a href="#" target="_blank" title="Telefone 1" rel="noopener noreferrer">
			<span>Telefone 1</span>
			<i class="fab fa-whatsapp" aria-hidden="true"></i>
		</a>
		<a href="#" target="_blank" title="Telefone 2" rel="noopener noreferrer">
			<span>Telefone 2</span>
			<i class="fab fa-whatsapp" aria-hidden="true"></i>
		</a>
	</div>
</div>

<div id="chatPhone2">
	<div id="btn" style="background-color: #0e300c"> 
		<i class="fas fa-phone-alt" aria-hidden="true"></i>    
	</div>
	<div id="callto">
		<i class="fas fa-times" aria-hidden="true"></i> 
		<a href="#" target="_blank" title="Telefone 3" rel="noopener noreferrer">
			<span>Telefone 3</span>
			<i class="fas fa-phone-alt" aria-hidden="true"></i>
		</a>
		<a href="#" target="_blank" title="Telefone 4" rel="noopener noreferrer">
			<span>Telefone 4</span>
			<i class="fas fa-phone-alt" aria-hidden="true"></i>
		</a>
	</div>
</div>


</body>
</html>