Sticky Button

This is used to place a sticky contact button on the page, and a CALL button on mobile:


HTML

<div class="contactUs-float" >
<a href="#" title="Request Service"><i  class="x-icon x-icon-envelope" data-x-icon="&#xf0e0;" aria-hidden="true"></i> Request Service</a>
</div>

<div class="callUs-float" >
<a href="tel:XXXXXXXXXX" title="Tap to Call"><i  class="x-icon mrs wht x-icon-phone-square" data-x-icon="&#xf098;" aria-hidden="true"></i>Tap to Call</a>
</div>

CSS

/* STICKY CONTACT VERTICAL BUTTON
   ================================================== */

.callUs-float {
      background-color: #C41230;
      float: right;
      transform: rotate(90deg);
      transform-origin: right top 0;
      transition: padding 1s ease 0s, background-color .5s ease 0s;
      position: fixed;
      right: 0;
      top: 570px;
      z-index: 999;
      -webkit-transform-origin: right top 0;
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
}

/* STICKY CONTACT TOP HORIZONTAL BUTTON
   ================================================== */

.contactUs-float {
	background-color: #D31145;
	float: right;
	transition: padding 1s ease 0s, background-color .5s ease 0s;
	position: fixed;
	right: 0;
	top: 0px;
	z-index: 99999;
}

.contactUs-float a {
	color: #fff;
	float: right;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	padding: 10px 15px 10px;
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
}

.contactUs-float:hover {
	background-color:#7B0303;
}

.contactUs-float a:hover {
	color: #fff;
}

/* STICKY MOBILE CALL BUTTON
   ================================================== */

.callUs-float {
	display:block;
	width:100%;
	background-color: #1BBC9B;
	float: right;
	transition: padding 1s ease 0s, background-color .5s ease 0s;
	position: fixed;
	right: 0;
	bottom: 0px;
	z-index: 999;
}

.callUs-float a {
	display:block;
	width:100%;
	color: #fff;
	float: none;
	font-size: 20px;
	font-weight:700;
	line-height: 24px;
	letter-spacing: 1px;
	padding: 20px 15px 20px;
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
	border-top:2px solid #fff;
	text-align:center;
}

.callUs-float:hover {
	background-color:#222;
}

.callUs-float a:hover {
	color: #fff;
}

@Media

To hide the on desktops (not used here for demo purposes)

@media (max-width: 1050px){
.contactUs-float, .contactUs-top, .x-colophon.top {display: none;}
}

@media (min-width: 440px){
.callUs-float {display: none;}
}

Example usage:

See green “TAP TO CALL” at the bottom of this page, and/or see on a live site with this demo