Famous Bloggers

How To Blog and Start a Business

Home » The Famous Blog » Call Your Readers To Action In Style With This CSS Trick

Call Your Readers To Action In Style With This CSS Trick

- by

Call To Action CSS Trick

If you’ve been blogging seriously for any length of time at all, you’ve probably read that it’s important to be calling your readers to action at the end of your posts. By “calling them to action”, I mean asking them to do something – leave a comment, share the post, subscribe to a newsletter, or reply with a video of them juggling live chickens. Whatever you want them to do, the important thing is that you ask instead of just writing your post and expecting it to happen.

Now, you could easily just make the last paragraph of your post be your call to action. However, just adding it in as plain text is kinda boring – a call to action that looks just like the content can easily be overlooked once a reader skims your article and finds the information they want. You need to make your call to action stand out. You need to make it interesting.

Let’s Make an Interesting Call-out.

Today I’m going to show you a simple CSS trick you can use to make your calls to action much more visually appealing. Once you’ve set this up, it’s a simple matter of adding the class to each post’s call – or, even better, hard-coding your call to action directly into your theme so it’s on every post. I’ll show you how to do both. First, though, let’s set up the CSS.

Basically, we’re going to create a CSS class that puts text in a “stitched” box, and also give it a drop shadow. When it’s done, it should look just this:

call to action css

You can see the actual callout at the bottom of my recent business card tutorial.

To create this, open your theme editor and find your main stylesheet – it’ll probably be called style.css.

Add the following code to the bottom of the stylesheet:

[css].callout {
padding: 5px 10px;
margin: 0px;
background: #3333dd;
color: #fff;
font-weight: normal;
line-height: 1.3em;
border: 2px dashed #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-khtml-border-radius: 3px;
-moz-box-shadow: 0 0 0 4px #3333dd, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #3333dd, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #3300aa;
}[/css]

This code creates a CSS class that you can apply to any piece of text. Save your stylesheet, and you’re done!

Now whenever you want to create a call to action in your blog posts just create it like this:

<p class="callout">Your callout here</p>

If you want to embed a universal call to action that will be automatically applied to every blog post, all you need to do is embed that paragraph in your theme. Just open up single.php in your theme folder and insert the code directly below this line:

<?php the_content(); ?>

Once that’s embedded in your theme, it’ll show up on every post. Bonus: This method of embedding the callout gets rid of the need for a plugin, which will make your blog faster.

[photo courtesy of Flickr user Redwood 1. CC BY -ND 2.0]

About

Here's a bit about me: I'm a junior at Iowa State University studying Management Information Systems, I run the blog College Info Geek, and I'm a huge DDR freak. I also like to be transparent, so I'd like you to know that I'm working really hard to become a trusted source for college tips.

Reader Interactions

Related Posts

{ 12 Responses }

  1. Al Sefati says:
    I have seen that somewhere..I wonder where...could it be SEOMoz? hm...moz-box-shado what? LOL good one ;)
    • Thomas Frank says:
      I actually learned it from CSS Tricks! Such an awesome site :)
  2. Kimberly Gauthier says:
    Thanks for sharing this! I'm trying to learn more about simple CSS coding and this is perfect for me. I'll be playing around with it today.
  3. Sealey Aldred says:
    Really nice and interesting call to action. Thanks for sharing this simple css trick that brings out a great attractive result.
  4. Raj says:
    I do this call for action thing manually after most of my posts. This is a nice way to highlight/ automate it. But, I don't want to highlight because I want only serious readers who have read through the whole post to subscribe to my email updates & I don't want to automate because my call for action keeps changing, depending on the type of post.
  5. Anand says:
    Nice way to get the action on post. I liked it, I'll try to implement this in my blog. Thanks! Regards Anand
  6. Agatha Tefora says:
    Your call to action is catchy, I agree. Colors for both font and background can be changed. Good tip and thanks.
  7. abhiz says:
    Hello its really an interesting tutorial. I'm using shareholic plugin in the bottom any problem if i use this method? Your bottom box screen shot looks great
    • Thomas Frank says:
      You'll have no trouble using this code in tandem with any plugins. It's literally just some CSS code that you can manually apply to any text you want; there's no Javascript or PHP that could interfere with other code running on the page.
  8. Doug says:
    mmm not bad. I agree you need a call to action. I think big rounced yellow buttons with italic black text are a proven winner too
  9. Ryan Biddulph says:
    Hi Thomas, Making a clear, definite and eye catching call does wonders for your blog or business for that matter. Stick with 1, or 2 calls top on your blog, and readers generally do it. Spruce up your call with your nifty CSS tips and even more readers will take it. The key is to make it eye-catching without going overboard. Subtly counts a great deal. Thanks for sharing your insight Thomas. RB
  10. jim syyap says:
    Thanks for sharing that code snippet. I have a wordpress blog that I use for testing and playing with. I'll insert that in there and see how it works. Enjoy your day!