Create a CSS3 Call to Action Button

Jul 6 2010 by Andrew Roberts | 34 Comments

Create a CSS3 Call to Action Button

Continuing on with my previous article showing the power of CSS3 for web designers, I’m now going to share with you a method for making a slick call to action button using only CSS.

Like the last article, I’m going to take a previous Photoshop tutorial called How to Create a Slick and Clean Button in Photoshop by Six Revisions Chief Editor, Jacob Gube, and try my best to recreate it without using a graphics editor. I think doing this is one of the best ways to highlight the fact that CSS3 can make our jobs as web designers much easier.

Check out that Photoshop tutorial and let me know how close I got to recreating its final product.

Live Demo of CSS3 Call to Action Button

Here’s what we’re going to make. It’s actually live, so feel free to hover over the button (clicking on it, though, will take you to the Six Revisions front page).

If you can’t see it right below, you may have iFrames disabled, or are using a browser that doesn’t yet support these CSS3 modules.

In-Page Demo

Screenshot of Call to Action Button

Here’s how the call to action button should look like (along with its hover state in blue).

Create a CSS3 Call to Action Button

Basic HTML Markup

Okay, here we go: Let’s start with the HTML. Very simple here, just a div to contain the button and a normal hyperlink element with a class of .btn (short for "button") that will represent our call to action button. What a great reminder of what life was like before CSS!

Note: The div around the hyperlink element is not really needed for this to work, but it’s always a good idea to have a container for flexibility.

<div id="linear">
  <a href="http://www.sixrevisions.com" class="btn">CLICK THIS BUTTON</a>
</div>

Basic Markup

Basic CSS

Here we will add our first bit of CSS — just some basic styles for the normal and hover states of the button.

Note: The background colors will be superseded by CSS3 gradients later on, but it’s always good practice to have a back-up plan in case the user is using a browser that doesn’t support CSS3.

a.btn {
  width: 250px;
  padding: 10px 25px 10px 25px;
  font-family: Arial;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background-color: #98ba3f;
}

a.btn:hover {
  background-color: #245191;
}

Basic Styles

Give the Button a text-shadow CSS Attribute

In this step, we give our call to action button text a subtle text shadow. This actually isn’t CSS3, but it’s also not a highly used CSS attribute.

We make the color of the text-shadow attribute different for the normal state and the hover state (using the :hover pseudo-class).

a.btn {
  text-shadow: -1px -1px 2px #618926;
}

a.btn:hover {
  text-shadow: -1px -1px 2px #465f97;
}

Give the Button text-shadow

Give the Button a Thin Border

Let’s add a thin, 1px border to both button states to make the button a bit more interesting.

a.btn {
  border: 1px solid #618926;
}

a.btn:hover {
  border: 1px solid #0f2557;
}

Since up to this point we have only used CSS2 specs, this is how our call to action button will look like (degrade) in older web browsers.

Give the Button 1px Borders

Round the Corners with CSS3

Alright, here’s where things get interesting. We are going to use CSS3 to add a subtle rounded corner effect to the button.

Using browser vendor prefixes (e.g. -moz- for Mozilla browsers), we can add a 3px border-radius attribute to the .btn class that will round the corners of the button.

Tip: To learn more about some CSS3 basics and why we have to use those crazy-looking vendor prefixes, check out my previous article called CSS3 Techniques You Should Know.

a.btn {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

a.btn:hover {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

It’s not a huge change, but it looks more interesting. Agree?

Give the Button 1px Borders

Add CSS3 Gradients

In this final step, we add in the styles that really make this button come to life.

We implement the background gradients that give the button its characteristic slick/modern look. We need a starting and ending gradient color, as well as a stop color in between.

I’ll admit, the WebKit version (which affects Apple Safari and Google Chrome) looks pretty complicated. I’ve seen numerous ways of creating gradients for WebKit-based browsers, but none of them seem to be as simple as Mozilla browsers’ method.

a.btn {
  background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
}

a.btn:hover {
  background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
}

Here’s what it should look like (I’d say it’s pretty close to the original Photoshop tutorial that this is based off of).

Gradient

All the CSS Together Now!

Here is our complete CSS for the .btn class.

a.btn {
  width: 250px;
  padding: 10px 25px 10px 25px;
  font-family: Arial;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  text-shadow: -1px -1px 2px #618926;
  background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
  border: 1px solid #618926;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

a.btn:hover {
  text-shadow: -1px -1px 2px #465f97;
  background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
  border: 1px solid #0f2557;
}

Finished!

There you have it! With a relatively low number of styles, we get a button that looks quite similar to the Photoshop version. If you weren’t already as excited as I am about CSS3, then hopefully this article will encourage you to explore and use this next iteration of CSS.

Gradient

More CSS3 Reading

Read these other articles and tutorials to learn more about CSS3.

Download Source Files

Related Content

About the Author

Andrew Roberts is a Christian with a passion for web design and development. His web interests focus mostly on HTML/CSS, JavaScript, & PHP/MySQL. When he’s not glued to the computer, he’s spending time with his girlfriend Kaitlynn, photographing animals, or reading. His goal is to attend graduate school for Biblical Studies & Ministry.

34 Comments

Jennifer R

July 6th, 2010

It’s not a new technique but thanks you for it.

Señor Swinstead

July 6th, 2010

And of course the best thing about this is that including 10 of the photoshop version would require 10 Jpegs (Pngs, Gifs, whatever) meaning ten times the file size. The CSS version can use the same styles applied to how many links you like and uses no extra bandwidth.

Matthew

July 6th, 2010

Great article!

Thanks for sharing.

Ogvidius

July 6th, 2010

Great article / tutorial Andrew! Very nice little button. I wish everyone would update their browsers so that we could start using CSS3 all the time.

millerL

July 6th, 2010

Great tutorial,really thanks.

Erik

July 6th, 2010

Why all the rules: width, padding, etc. on the :hover as well?

Chris

July 6th, 2010

I’ve also found the syntax for CSS gradients to be really confusing, so thanks for this! Just a note – there’s no need to repeat all the CSS declarations in the button’s hover state (such as the button’s width and font family). You only need to declare properties you’re adding or overwriting.

idont

July 6th, 2010

The rendering on non CSS3 browser should be optimized.

aki

July 6th, 2010

Bandwidth friendly. Just hope the user browser support this. Thanks for the CSS gradients mate!

Matthew Snider

July 6th, 2010

Going to use this shortly. Wondering how though as in where and what for?

Ariel Mariani

July 6th, 2010

Excelent tutorial, and i agree with you about the gradient in webkit version, its very complicated, i recommend you a CSS3 Gradient Generator where you can see the live result. Here is the link http://bit.ly/8wh9n

Thanks again! Ariel M.

Jae Xavier

July 6th, 2010

Someday soon, I gotta start integrating this into my website. I’m keeping this bookmarked.

Thanks! :)

Andrew Roberts

July 6th, 2010

About the extra CSS markup: Yes, you all are right. Epic fail on my part for not cleaning it up. Amateur mistake, thanks for calling me out though!

@Señor: Exactly! :)

@Ogvidius: Join the party, haha

Thanks to everyone for the great comments!

Arshad Cini

July 6th, 2010

Great tutorial Andrew

Thanks for sharing

Deb

July 6th, 2010

Really you should not repeat the unchanged rules for both normal & hover state.

Broncha

July 6th, 2010

Nice article.I also do agree the webkit version of gradient is complicated.

Marcell Purham

July 6th, 2010

Great article. CSS3 is amazing cant wait til ie supports it haha

tee are

July 7th, 2010

thanks for the sharing… i will try it in my website

jerson

July 7th, 2010

good article …….

but i think this code is not supporting in IE browser

xychazs

July 7th, 2010

Usefully tutorial. Than’k to shared.

Miami

July 7th, 2010

hard to believe you can create such nice effects with css. It is amazing how far css has come.

Daniel

July 7th, 2010

Nice tutorial,
but did you test it on IE ??
it’s really sad can’t use css3 at work..

Jacob Gube

July 7th, 2010

@Daniel: Unfortunately, this isn’t supported by IE. However, to be optimistic, IE9 should be able to render this.

utari

July 8th, 2010

thanks for the tutorial about create a cool button..great post!

Alisa

July 9th, 2010

Yes, hopefully IE9 will support css3 so that we can start using it in the future. That means our corporation *might* upgrade everyone to it in about about 3 years.. our standard is still IE7 (but at least we got rid of IE6)! :)

Mike

July 11th, 2010

Thank for this awesome article. Sadly it works only on Firefox. When I try to do it with IE, the result is not good at FF.

kutoku

July 14th, 2010

your article is not supporting in IE6&7 browser, right?

Baris

July 15th, 2010

thanks for great tutorial.

Ankit

July 15th, 2010

It’s really for me.
I was looking for same type of solution for creating Call-to-Action button without using Photoshop.
Thanks

Alex

September 10th, 2010

very nice. thanks

any work-around for IE? Anything to make it look pretty

Geraint Jones

December 28th, 2010

Sadly you cant do color stop’s with IE’s gradient however the following should give you an acceptable work-around

a.btn {
background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
/* For IE 5.5+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF98ba40, endColorstr=#618926);
/* For Internet Explorer 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF98ba40, endColorstr=#618926)”;
}

a.btn:hover {
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
/* For IE 5.5+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF245192, endColorstr=#12295d);
/* For Internet Explorer 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF245192, endColorstr=#12295d)”;
}

Turanian

January 28th, 2011

Great thanks for this nice tutorial…

I learned too much about CSS3 gradient event.

Ensurance

February 28th, 2011

Thank you Jones,your code worked for me!

carrie

October 2nd, 2011

Thanks a lot for this tutorial css3 buttons is kind tricky, now i can create a variety of buttons in different color.

Leave a Comment

Subscribe to the comments on this article.