The Fancy Floating Contact Button

One of the easiest ways to convert a visitor to your page is through a contact page. Unfortunately not all visitors are willing to look around your site for the appropriate link. Why not just make it easier for them with a floating vertical button.

This is very simple, clean, and easy to implement no matter what platform you are on. Here we will strictly use HTML5 and CSS3 to achieve our goal. One of the nice things about the floating navigation bar is it even works great on mobile. So lets jump right in and create a floating navigation button.

Note: These instructions will be using Cornerstone, but can the button can be easily achieved in Visual Composer or on any other site.

We need to start off by locating the pages that we would like to add the button. In some cases you may want to add the button to every single page, but we will be doing this on a page by page basis. for this example we will be adding the button to the home page of a website.

First thing is first, we will need to add a Raw Content block. This will allow us to add our HTML to the page. It really doesn’t matter where you place the Raw Content block since we will be controlling the position later on I like to place it as far to the top of the page as possible as to not interfere with the rest of the layout in Cornerstone.

Add a raw content block to cornerstone

Once you have the Raw Content block added to your page, we will add the HTML for our button. Click on the Raw Content in Cornerstone, and in the left-hand options panel add the following HTML:

<div class="contactUs-float" >
<a href="#" alt="contact us for your next web job">Contact Us</a>
</div>

If we break this down we can see that we have created a div (container) called “contactUs-float”. Inside that container we added a link that says “Contact Us”. For right now this is all of the HTML that we will be creating. Pretty simple right? Right now it doesn’t look correct, but that’s where the CSS will come in.

code to add a floating button

There are a few ways that we can add the CSS for our button. If you are using the button on multiple pages I would suggest adding the CSS to the Customizer under Custom. For the purpose of this tutorial I will be adding the CSS to the “Custom CSS” tab in Cornerstone for this page only. So let’s head over there now, click on Custom CSS under Settings in Cornerstone.

custom css for floating button

 

Let’s start by adding some color and positioning to the and color to our button with this code:

.contactUs-float {
background-color: #25adda;
float: right;
}

This will give our button a blue background color and will force the botton to move to the right side of our screen. Feel free to play around with the background color to match your site’s color pallet.

contact button unstyled

Next we are going to rotate our button 90 degrees and set the location that the rotation will occur making the button vertical and then setting a z-index  to make sure the button stays on top of all other elements on the page:

transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform-origin: right top 0;
-webkit-transform-origin: right top 0;
z-index: 999;

setting your contact button vertical

Now we need to force the button all the way to the edge of the screen by fixing the position of the button and assigning the location on the screen. These values can be modified to your liking:

position: fixed;
right: 0;
top: 476px;

You should now have a button that is located all the way to the right side of your site. Now we need to add more style to the button. If we wanted to this would work as it is, but we want it to be fancy. We will do this by styling the link that is located within the contactUs-float container:

.contactUs-float a {
color: white;
float: right;
font-size: 20px;
line-height: 28px;
letter-spacing: 2px;
padding: 15px 20px 16px;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
}

So what is this going to do? Let’s go over the code line by line. First we are going to set our link color to white (color: white) just in case our default link color doesn’t work. Float: right is going to push our link to the right of the container.

    • Font-size is going to adjust the size of our font (pretty self explanatory).
    • Line-height is going to control the leading of the link text.
    • Letter-spacing will allow us to control the kerning of our link text.
    • Padding is going to control how large the actual button is going to be.
    • Text-transform is going to force all of our text to be uppercase.
    • Finally font-family is going to adjust the font of the link text if we want it to be something different than the default site text.

Side note on the font family, if you are planning on using a Google Font you need to make sure that your site is calling on it via @import or <link>. If your do not, this font-family rule will not work.

styled vertical button

We are almost done with the first part of the button. From here we are going to add a a hover effect. This is by no means necessary, but it makes the button look much nicer. We will need to create a new rule in our CSS that applies to the link inside the contactUs-float container and will be triggered when you hover over it. This is called a pseudo-class.

.contactUs-float:hover {
background-color:#1d83a5;
}

The hover effect is a little bit harsh and sudden. So let’s add one more style to the .contactUs-float class to implement a smooth transition. This will force the background to ease from one color to another over .5 seconds. This can be changed to whatever speed you would like:

.contactUs-float {
transition: background-color .5s ease 0s;
}

Technically we could done done right here, but the only problem is this button doesn’t really work for mobile. In my original version on smaller screens I just completely hid this button so I didn’t have to deal with finding a resolution. This really didn’t work, so the fix I came up with was to completely dump the text and implement the icon set that X comes prepackaged with. Here is how you can optimize the button for smaller screens.

First we are going to need to jump over to our Raw HTML element on our page. We need to identify that we will only be using this link with the words “Contact Us” on larger screens. We accomplish this by adding a descriptive class.

<a class="lgscreen" href="#">Contact Us</a>

Next inside the same contactUs-float container we need to add a second link. This may seem strange now, but it will make sense shortly. We will add link that goes to the same exact destination as the original link but instead of text inside the anchor tag (<a></a>) we are going to add an XTheme icon. We will also need to add a class that identifies this will be the link used on smaller screens. Here is the code:


 <div class="contactUs-float" >
  <a class="lgscreen" href="#" alt="contact us for your next web job">Contact Us</a>

  <a class="smscreen" href="#" alt="contact us for your next web job"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a>
</div>

If you would like to use a different icon, you will need to change the “x-icon-_____” part of the code. A list of the icons can be found here.

contact bar setup for mobile

We now are going to use those classes that we created to setup our button for different screen sizes. We will be doing that with what is called a media query (@media). This will act as a stylesheet within our CSS that only applies to specific screen widths.

We now need to jump back into our Custom CSS under the options tab. First we are going to use the .smscreen (mobile link) class and hide this link. It will cause the icon we have added to disappear. Don’t get scared, this is supposed to happen:

.smscreen {
display:none;
}

Next we will need to create a media query for small screens. I have chosen to set the break point for screens to be at 1024px. This can be anything you would like, and it will vary for your site so you will need to play with this for your specific layout.

@media (max-width: 1050px){

}

What we are essentially doing here is saying any window that is 1050px and under will utilize these specific styles, screens that are larger will ignore these styles. This is the core of creating a responsive site that works across all devices. Now inside this new media query we are going to add a series of rules for the .lgscreen and .smscreen classes. The first one will be to hide the .lgscreen class causing the “Contact Us” link to disappear.

@media (max-width: 1050px){
.lgscreen {
display:none;
}
}

This is going to look rather strange since there looks to be extra curly braces but they are completely necessary, we have a style nested within a style (INCEPTION). After you have added the rule to hide the .lgscreen class we need to force our .smscreen class to appear, display inline, rotate the icon by 270 degrees, and add padding to the icon to give ourselves some size to the button.

@media (max-width: 1050px){
.lgscreen {
display:none;
}
.smscreen {
display:inline !IMPORTANT;
-webkit-transform: rotate(270deg) !important;
transform: rotate(270deg)!important;
padding:15px !important;
}
}

If at anypoint you decide that you just don’t need the button on mobile, you can just replace all of the CSS inside the media query with a .contactUS-float{ display: none !important;} and the button will hide for those smaller devices.

final mobile vertical contact button

Final HTML:


 <div class="contactUs-float" >
  <a class="lgscreen" href="#" alt="contact us for your next web job">Contact Us</a>

  <a class="smscreen" href="#" alt="contact us for your next web job"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a>
</div>

Final CSS:

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

.contactUs-float a {
    color: white;
    float: right;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 2px;
    padding: 15px 20px 16px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
}

.contactUs-float:hover {
background-color:#1d83a5;
}

.smscreen {
  display:none;
}

@media (max-width: 1050px){

  .lgscreen {
    display:none;
  }
  .smscreen {
    display:inline !IMPORTANT;
     -webkit-transform: rotate(270deg) !important;
    transform: rotate(270deg)!important;
    padding:15px !important;
  }
}

About the Author

Sean Piper

Facebook Twitter

Sean Piper is the owner and founder of 24th & 10 Design Agency (http://24thand10.com) as well as SlashDotHack (http://slashdothack.com). Proud designer, lack-luster developer, and video game fanatic.