<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<link rel="stylesheet" href="http://data-center.co.in/demo/minetag/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
<div class="right-corder-container">
<button class="right-corder-container-button" data-toggle="modal" data-target="#exampleModalCenter">
<span class="short-text"><i class="fa fa-envelope" aria-hidden="true"></i></span>
<span class="long-text">Contact Us</span>
</button>
</div>
<div class="right-corder-container call-us">
<a class="right-corder-container-button bg-primary" href="tel:8800191126" >
<span class="short-text"><i class="fa fa-phone" aria-hidden="true"></i></span>
<span class="long-text">Call Us</span>
</a>
</div>
<div class="right-corder-container whatapp-us">
<a class="right-corder-container-button bg-success" href="https://wa.me/919839060802?text=I'm%20inquiring%20about%20the%20Related%20Minetage%20" >
<span class="short-text"><i class="fa fa-whatsapp" aria-hidden="true"></i></span>
<span class="long-text">Whatsapp Us</span>
</a>
</div>
<!-- Modal -->
<div class="modal fade " id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog mt-4 " role="document">
<div class="modal-content">
<div class="modal-body p-0 ">
<form id="contactus" action="" method="post">
<button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="text-center font-weight-bold">Contact us </h5>
<fieldset class=" mt-4"> <input placeholder="Name" type="text" tabindex="1" required autofocus> </fieldset>
<fieldset> <input placeholder="Phone Number" type="tel" tabindex="2" required> </fieldset>
<fieldset> <input placeholder="Vehicle No" type="text" tabindex="3" required autofocus> </fieldset>
<fieldset> <input placeholder="Vehicle Type" type="text" tabindex="4" required> </fieldset>
<fieldset> <input placeholder="District" type="text" tabindex="5" required> </fieldset>
<fieldset> <textarea placeholder="Type your message here..." tabindex="6" required></textarea> </fieldset>
<fieldset> <button name="submit" class="rounded-btn" type="submit" id="contactus-submit"><i id="icon" class=""></i> Send Now</button> </fieldset>
</form>
</div>
</div>
</div>
</div>
.vi_btn{background:#6db744;}
.logo-txt img {
vertical-align: bottom;
margin: 5px;
}
.counter {
overflow: hidden;
}
@media (max-width:480px){
.call-us {
top: 50%;
}
.whatapp-us {
top: 60%;
}
.minetage_bg {
width: 100%;
height: 65%;
background-position: bottom;
right: 57px;
top: 57%;
}
.counter_content {
text-align: center;
}
.logo-txt img {
width: 36px;
}
.counter_content .display-4 {
font-size: 30px;
}
}
.right-corder-container {
position:fixed;
right:10px;
top:40%;
z-index:999;
}
.call-us
{
top:47%;
}
.whatapp-us{
top:54%;
}
.right-corder-container .right-corder-container-button {
height: 45px;
width: 45px;
border:none;
background-color:#f36715;
border-radius: 62px; /*Transform the square into rectangle, sync that value with the width/height*/
transition: all 300ms; /*Animation to close the button (circle)*/
box-shadow:2px 2px 5px rgb(62 25 4 / 85%);
cursor:pointer;
display: block;
}
.right-corder-container .right-corder-container-button span {
font-size: 20px;
color: white;
position: absolute;
left: 0px;
top: 8px;
line-height: 30px;
right: 0px;
text-align: center;
}
.right-corder-container .right-corder-container-button:hover span{
left: 20px;
text-align:inherit;
right: auto;
}
.right-corder-container .right-corder-container-button:hover {
transition: all 400ms cubic-bezier(.62,.1,.5,1);
width:200px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/*
Long text appears slowly with an animation. That code prepare the animation by hidding the text.
The use of display is not there because it does not work well with CSS3 animation.
*/
.right-corder-container .right-corder-container-button .long-text {
transition: opacity 1000ms; /*Only the text fadein/fadeout is animated*/
opacity:0; /*By default we do not display the text, we want the text to fade in*/
color:white;
white-space: nowrap;
font-size: 0; /*Set to 0 to not have overflow on the right of the browser*/
width: 0; /*Set to 0 to not have overflow on the right of the browser*/
margin:0; /*Set to 0 to not have overflow on the right of the browser*/
}
/*
Animation to have a text that appear progressively. We need to play with a delay
on the width and the font-size to not have the browser have the text appears on the right
side of the browser view port. This has the side-effect of having an horizontal bar.
*/
.right-corder-container .right-corder-container-button .long-text.show-long-text{
transition: opacity 700ms,
width 1ms linear 270ms, /*two thirds of the animation on the container width*/
font-size 1ms linear 270ms; /*two thirds of the animation on the container width*/
opacity:1;
margin-top: 2px; /*Center the position vertically*/
margin-left: 50px; /*Center between the + and the right end side*/
font-size: 18px; /*Text size, cannot be defined initially without moving the scrollbar*/
width: auto; /*Required to be set with a delay (see animation) to not have scrollbar. Delay is to wait container to size up*/
}
/* form */
#contactus {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
/* background: #F9F9F9; */
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
#contactus {}
#contactus h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px
}
#contactus h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%
}
#contactus input[type="text"],
#contactus input[type="email"],
#contactus input[type="tel"],
#contactus input[type="url"],
#contactus textarea {
width: 100%;
border:none;
border-bottom: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px
}
#contactus input[type="text"]:hover,
#contactus input[type="email"]:hover,
#contactus input[type="tel"]:hover,
#contactus input[type="url"]:hover,
#contactus textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border-bottom: 1px solid #f0715f;
}
#contactus textarea {
height: 100px;
max-width: 100%;
resize: none
}
#contactus button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #f0715f;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px
}
#contactus button[type="submit"]:hover {
background: #f07150;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out
}
#contactus button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5)
}
#contactus input:focus,
#contactus textarea:focus {
outline: 0;
border: 1px solid #aaa
}
$(".right-corder-container-button").hover(function() {
$(this).parents(".right-corder-container").find(".long-text").addClass("show-long-text");
}, function () {
$(".long-text").removeClass("show-long-text");
});
