chat

<a href="#" onclick="window.open('http://www.kabum.com.br/cgi-local/site/atendimento/sac/sac.cgi', 'KABUM_SAC','top=50,left=50,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=470,height=740'); return false">SAC</a>

<a href="#" onclick="window.open('http://127.0.0.1:8000/painel/chat/create', 'CHAT_SGA','top=50,left=50,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=470,height=740'); return false">SAC</a> class="float">
<i class="fa fa-envelope my-float"></i>
</a>
<div class="label-container">
<div class="label-text">Feedback</div>
<i class="fa fa-play label-arrow"></i>
</div>

//

.label-container{
	position:fixed;
	bottom:48px;
	right:105px;
	display:table;
	visibility: hidden;
}

.label-text{
	color:#FFF;
	background:rgba(51,51,51,0.5);
	display:table-cell;
	vertical-align:middle;
	padding:10px;
	border-radius:3px;
}

.label-arrow{
	display:table-cell;
	vertical-align:middle;
	color:#333;
	opacity:0.5;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#06C;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.my-float{
	font-size:24px;
	margin-top:18px;
}

a.float + div.label-container {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease;
}

a.float:hover + div.label-container{
  visibility: visible;
  opacity: 1;
}