Cheesetoast

Brain Food for Web Developers

Button

Pure CSS Call To Action Button

"Click This" buttonI’m going to demonstrate how to use CSS to create an eye catching “call to action” button.

First of all we create a basic HTML button:

<a class="call-to-action" href="#">CLICK THIS!</a>

Button - First RoundNext we add the CSS to give the button some padding and add a rounded border. We also get rid of the default color and the underline that comes with anchor links.

a.call-to-action {
color: rgb(30, 142, 30);
font-weight: bold; 
width: 200px;
padding: 10px 20px;
font-family: arial, sans-serif;
font-size: 25px;
text-decoration: none;
border: 1px solid #C3C3B7;
border-radius: 8px;
...
}

Button - Second RoundNext we’ll add a gradient background to make it look more appealing.

Choose the colour of the button carefully. Different colours have different effects. Try reading this article on Call to Action Buttons and the Psychology of Color for more info.

I used the CSS gradient generator at Colorzilla to get the following code. It’s a lot quicker than coding it by hand and you get to preview it first.

background: #f2f2e7;	/* old browsers */	
background: -moz-linear-gradient(top,  #f2f2e7 0%, #c3c3b7 100%);	/* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2e7), color-stop(100%,#c3c3b7));	/* chrome,safari4+ */ 
background: -webkit-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* chrome10+,safari5.1+ */ 
background: -o-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* opera 11.10+ */ 
background: -ms-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%); /* ie10+ */ 
background: linear-gradient(to bottom,  #f2f2e7 0%,#c3c3b7 100%); /* w3c */ 
filter: progid; /* ie6-9 */

"Click This" buttonLet’s not forget some box shadow to give our button some depth. We’ll give it two box shadows, one of which will be inset:

-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;

Finally we’ll add a subtle CSS3 transition animation for when the user hovers over the button. Add this to the class:

-webkit-transition: box-shadow 0.3s linear; 
-khtml-transition: box-shadow 0.3s linear; 
-moz-transition: box-shadow 0.3s linear;  
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;

Now we create the hover state:

a.call-to-action:hover {
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.9) 0px 5px 20px, inset rgba(0,0,0,0.15) 0px -10px 10px;
}

Here’s the whole thing:

a.call-to-action {
color: rgb(30, 142, 30);
font-weight: bold; 
width: 200px;
padding: 10px 20px;
font-family: arial, sans-serif;
font-size: 25px;
text-decoration: none;
border: 1px solid #C3C3B7;
border-radius: 8px;

/* Background gradient */
background: #f2f2e7;	/* old browsers */	
background: -moz-linear-gradient(top,  #f2f2e7 0%, #c3c3b7 100%);	/* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2e7), color-stop(100%,#c3c3b7));	/* chrome,safari4+ */ 
background: -webkit-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* chrome10+,safari5.1+ */ 
background: -o-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* opera 11.10+ */ 
background: -ms-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%); /* ie10+ */ 
background: linear-gradient(to bottom,  #f2f2e7 0%,#c3c3b7 100%); /* w3c */ 
filter: progid; /* ie6-9 */

/* Box shadow */
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;

/* CSS Transition Anitmation */
-webkit-transition: box-shadow 0.3s linear; 
-khtml-transition: box-shadow 0.3s linear; 
-moz-transition: box-shadow 0.3s linear;  
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}

a.call-to-action:hover {
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.9) 0px 5px 20px, inset rgba(0,0,0,0.15) 0px -10px 10px;
}

Here is the working example:

HOVER OVER ME

I hope this tutorial has been of some use. Please let me know if you have any suggestions on how this can be modified/improved.

Here are some other examples I made of CSS call to action buttons on codepen.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

2 Comments

  1. Its all great, Graham, thank you for your generosity. I guess the only thing to add is some “fixture” for the MS Incapable Explorer.
    Great post.

    • Thanks Kolyan!
      I’ll see what I can do about making it more IE friendly. Hopefully MS will catch up with their CSS3 effects someday.
      Graham