alabtechnosoft
<div style="position: relative; background: rgb(248, 249, 250);"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=number&text=Hello" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
<p>
</p><p>
</p><div class="survey">
<div class="survey1">
<a href="https://forms.gle/formes" target="_blank">
<div class="tg-icon"></div>
<div class="tg-text">YOUR OPINION MATTERS: Take a quick survey and help us serve you better.</div>
<div class="x1"><div class="cloud"></div></div>
<div class="x2"><div class="cloud"></div></div>
<div class="x3"><div class="cloud"></div></div>
<div class="x4"><div class="cloud"></div></div>
<div class="x5"><div class="cloud"></div></div>
</a>
</div>
</div></div>
custom css
/* Survey start/
.survey {
margin:0px auto 0;
max-width: 340px;
}
.survey1 {
margin-bottom: 15px;
}
.survey1 a {
display: block;
background: linear-gradient(146deg , rgb(43 45 44) 50%, rgb(254 2 2) 100%)!important;
border-radius: 15px;
overflow: hidden;
position: relative;
text-decoration: none;
}
.survey1 .tg-icon {
float: left;
width: 50px;
height: 50px;
margin-left: 10px;
margin-top: 10px;
background-size: cover;
background-image: url("https://image.flaticon.com/icons/png/512/3721/3721625.png");
z-index: 10;
}
.survey1 .tg-text {
overflow: hidden;
color: #fff;
font-size: 14px;
line-height: 23px;
padding: 15px 10px;
z-index: 10;
}
.survey1 .cloud {
width: 50px;
height: 50px;
display: block;
background-size: cover;
background-image: url("https://image.flaticon.com/icons/png/512/3061/3061258.png");
position: absolute;
opacity: 0.2;
}
.x1,
.x2,
.x3,
.x4,
.x5 {
position: absolute;
display: block;
}
@-webkit-keyframes animateCloud {
0% {
margin-left: -100px;
}
100% {
margin-left: 100%;
}
}
@-moz-keyframes animateCloud {
0% {
margin-left: -100px;
}
100% {
margin-left: 100%;
}
}
@keyframes animateCloud {
0% {
margin-left: -100px;
}
100% {
margin-left: 100%;
}
}
/ ANIMATIONS */
.x1 {
-webkit-animation: animateCloud 35s linear infinite;
-moz-animation: animateCloud 35s linear infinite;
animation: animateCloud 35s linear infinite;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
top: 10px;
}
.x2 {
-webkit-animation: animateCloud 20s linear infinite;
-moz-animation: animateCloud 20s linear infinite;
animation: animateCloud 20s linear infinite;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
top: 20px;
}
.x3 {
-webkit-animation: animateCloud 30s linear infinite;
-moz-animation: animateCloud 30s linear infinite;
animation: animateCloud 30s linear infinite;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
top: 25px;
}
.x4 {
-webkit-animation: animateCloud 18s linear infinite;
-moz-animation: animateCloud 18s linear infinite;
animation: animateCloud 18s linear infinite;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
top: 10px;
}
.x5 {
-webkit-animation: animateCloud 25s linear infinite;
-moz-animation: animateCloud 25s linear infinite;
animation: animateCloud 25s linear infinite;
-webkit-transform: scale(0.55);
-moz-transform: scale(0.55);
transform: scale(0.55);
top: 30px;
}
/* Survey end */
