The Floating Call To Action

Design Lab Status: Built

When designing a website there are a lot of factors that you need to keep in mind and they all are a priority, to be honest, so when I say that a user’s click path or even ‘Sales funnel’ is important it is just to illuminate the fact that it needs to be considered amongst the other important elements of a website.

Alright, lecture over!

Although my website isn’t really about converting visitors into clients, however, I figured that I would use my website as the example of how to create the floating call to action button.

Float ya boatĀ button

To get this effect it’s incredibly easy and it only requires some HTML Markup and a couple of lines of CSS for the styling.

You can really put the floating button wherever you would like! Top, Bottom and even the center of the page if you wish. For this example – I stuck with the more traditional bottom right of the page for my location.

To achieve this I have placed my markup before the end of my footer div and used the following markup;

Depending on what you want the button or call to action to do would depend on what you put in the href attribute if you want to send users to your contact page then simply swap out “anything_you_want” with your contact page link. I used mailto: [email protected] instead, you can also use the onclick() attribute if you wanted to make something a little more flashy, perhaps generate a modal contact form?

To get the button in position – you can just need to use the following CSS;

.float-container {
position: fixed;
right: 50px;
bottom: 0px;
width: 100%;
.floater {
width: 300px;
float: right;
height: auto;

Now you should be seeing the ‘Contact Me’ link already on your page and now we just need to make it a little sexier to match the rest of the websites styling and branding. For my button I used;

a.floater-contact {
font-size: 16px;
line-height: 1;
padding: 15px 55px;
color: #FFFFFF;
background: #f30a63;
letter-spacing: 2px;
text-transform: uppercase;
margin: 50px auto;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
font-family: ‘Poppins’;
font-weight: 800;
border: 0px;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
a.floater-contact:hover {
text-decoration: none;
a.floater-contact:active {
text-decoration: none;
a.floater-contact:before {
border-radius: 20px;

Whats the hvr-sweep-to-left class?

I can understand if the hvr-sweep-to-left class confuses you when you are attempting to replicate this on your website, I used Ian Lunn’s Hover.css stylesheet in order to produce this nice little button animations.

Now you’re done!

There shouldn’t be any more steps in order to get this floating bar working and it doesn’t have to be limited to what I have done. Previously, I have made a floating button link to mailto: on Desktops but when viewed on mobile devices it used the tel: attribute which visitors could simply ‘Click to Call’ when on the website, being that the website was for a Canberra based company this really did increase their conversion rate for the website. Food for thought!