Tasto whatsapp

by Andrea Biagi

HTML

<div class="wrap-wa">
	<a target="_blank" href="https://wa.me/+39340204924">
	<div class="chat-wa">
		<img width="50px" src="https://www.chefstudio.it/img/whatsapp.svg" alt="icon WhatsApp" title="WhatsApp">
	</div>
	</a>
	<div class="scritta-wa"> 
		Di cosa hai bisogno?
	</div>
</div>

CSS

body{
  background-color: pink;
}

.wrap-wa{
	position: fixed;
	bottom: 15px;
	right: 10px;
}

.wrap-wa .chat-wa{
    height: 50px;
    width: 50px;
	background-color: #25D366;
	border-radius: 100%;
	box-shadow: 1px 1px 39px -13px rgba(0,0,0,1);
	-webkit-box-shadow: 1px 1px 39px -13px rgba(0,0,0,1);
	-moz-box-shadow: 1px 1px 39px -13px rgba(0,0,0,1);
  margin: auto;
}

.wrap-wa .scritta-wa{
	background-color: #25D366;
	margin-top: 5px;
	border-radius: 20px;
	padding:0 8px;
	color: #fff;
	box-shadow: 1px 1px 39px -13px rgba(0,0,0,1);
	-webkit-box-shadow: 1px 1px 39px -13px rgba(0,0,0,1);
	-moz-box-shadow: 1px 1px 39px -13px rgba(0,0,0,1);
	display: block;
  font-size: 16px;
}