<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="feedback-widget">
<button class="btn btn-primary">Feedback</button>
<div class="survey">
<div class="title">
<p>
We'd love to hear your thoughts!
</p>
<a href="#" id="minimize">+ </a>
</div>
<div class="desc">
Please rate your experience & provide description of what you like or/and have issue with, so that we can continously improve our service.
</div>
<div class="rating">
<a class="rate-1" data-rate="1" href="#"></a>
<a class="rate-2" data-rate="2" href="#"></a>
<a class="rate-3" data-rate="3" href="#"></a>
<a class="rate-4" data-rate="4" href="#"></a>
<a class="rate-5 selected" data-rate="5" href="#"></a>
</div>
<textarea placeholder="Tell us more..."></textarea>
<button class="cta-btn">Send via Email</button>
</div>
</div>
</div>
.container {
text-align:center;
}
.feedback-widget{
position: fixed;
display: block;
height: auto;
width: 150px;
bottom: 10px;
right: 20px;
padding: 0;
border-radius: 50px;
z-index: 100;
box-shadow: none;
transition: width .3s ease-in-out;
}
.feedback-widget.active {
width: 300px;
background: #f7f7f7;
border-radius: 3px;
box-shadow: 0px 3px 30px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 4s .3s ease-in-out;
border-radius: 3px;
}
button {
background-color:#333;
border-radius:50px;
}
.btn-primary{
position: absolute;
bottom: 15px;
right: 15px;
padding: 20px 35px 20px 56px;
letter-spacing: 1px;
color: #fff;
background: linear-gradient(left, #00A8B0, #1E94FF);
background: -webkit-linear-gradient(left, #00A8B0, #1E94FF);
transform: scale(1);
opacity: 1;
display: block;
visibility: visible;
transition: transform .4s .3s ease-in, opacity .5s .3s ease-in, box-shadow .8s .4s ease-in;
}
.btn:after {
content: '';
background: url(https://allstateleadmarketplace.com/images/alm_white_icons/feedback-icon-white.png);
width: 28px;
height: 28px;
display: block;
position: absolute;
margin-top: -23px;
margin-left: -38px;
background-size: cover;
}
.btn:hover {
transition: box-shadow .2s ease-in-out,transform .2s ease-in-out;
box-shadow: 0px 6px 20px 2px rgba(0, 0, 0, 0.25), inset #00A8B0 0px 20px 50px 29px;
transform: translateY(-3px);
}
.feedback-widget.active .btn-primary{
visibility: hidden;
opacity: 0;
transform: scale(0);
overflow: hidden;
max-height: 0px;
max-width: 0px;
}
.feedback-widget .survey{
overflow:hidden;
max-height: 0px;
max-width: 0px;
opacity: 0;
border-radius: 50px;
z-index:4;
}
.feedback-widget.active .survey{
max-height: 600px;
max-width: 300px;
background: white;
padding: 0px;
text-align: center;
opacity: 1;
border-radius: 2px;
transition: max-width .4s ease-in-out, max-height .9s .4s ease-in-out, border-radius .9s .2s ease-in, opacity .2s .3s ease-in;
}
[class^="rate"]{
float: right;
padding: 5px 3px;
font-size: 18px;
color: #ddd;
background-color: grey;
-webkit-mask-image: url(https://image.flaticon.com/icons/svg/155/155276.svg);
mask-image: url(https://image.flaticon.com/icons/svg/155/155276.svg);
display: inline-block;
height: 40px;
width: 40px;
margin: 0 5px 0 5px;
opacity: .6;
}
[class^="rate"]:after{
content: '\f006';
font-family: FontAwesome;
}
.feedback-widget.active .survey .desc,
.feedback-widget.active .survey .rating,
.feedback-widget.active .survey textarea,
.feedback-widget.active .survey button {
margin: 20px;
}
.feedback-widget.active .survey textarea {
width: 260px;
height: 100px;
border: none;
border-radius: 11px;
padding: 10px;
}
.feedback-widget.active .survey .cta-btn {
position: relative;
min-width: 70px;
font-size: 13px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 15px;
background: #ff5d3c;
background: linear-gradient(left, #ff5d3c, #fe2a66);
background: -webkit-linear-gradient(left, #ff5d3c, #fe2a66);
}
.cta-btn:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
}
$(document).ready(function(){
$(".btn").click(function(){
$(".feedback-widget").toggleClass("active");
});
});
