OKLI float oneclick

by serg_x

HTML

<div class="float_oneclick">
  <a href="js/mail.php?fbtype=one_click_fbf" class="one_click_trigger">
    <span class="title">Заказать звонок</span>
    <span class="icon"><img src="https://okli.spb.ru/css/images/icon_float_phone.png" alt=""></span>
  </a>
</div>

CSS

body{
  font-family: "open sans";
}
a{
  color: #000;
}


.float_oneclick {
	position: fixed;
	bottom: 30px;
	right: 30px;
}
.float_oneclick a{
  display: block;
  text-decoration: none;
}
.float_oneclick .icon img{
  display: block;
}
.float_oneclick .icon{
  display: inline-block;
  vertical-align: middle;
  background-color: #f77a5e;
  padding: 15px;
  border-radius:100%;
}
.float_oneclick .title{
  display: inline-block;
  position: relative;
  vertical-align: middle;
  padding: 11px 30px;
  border:1px solid #fed5cc;
  background-color: #fff;
  margin-right: 20px;
  border-radius:4px;
}
.float_oneclick .title:before{
	right: -10px;
	top: 50%;
	content: '';
	transform: translate3d(0,-50%,0);
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
  border-width: 7px 0 7px 10px;
	border-color: transparent transparent transparent #fed5cc;
	z-index: 2;
}
.float_oneclick .title:after{
	right: -8px;
	top: 50%;
	content: '';
	transform: translate3d(0,-50%,0);
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
  border-width: 7px 0 7px 10px;
	border-color: transparent transparent transparent #fff;
	z-index: 3;
}