Call to Action

After reading this post you should be able to make “Call to Action” button on your post. In web terms, a call to action is usually an enticement for someone to visit a link, and that link is often designed to look like a button, ready to be clicked. Maybe you’d like visitors to head straight to your Services page? Or perhaps you’d like them to check out your latest recipe, or sign up for your newsletter?

Button Primary Scary Compact

gap
Contents πŸ”–

gap
Call to Action πŸ”–

CTA is a marketing term used extensively in advertising and selling. It refers to any device designed to prompt an immediate response or encourage an immediate sale. A CTA most often refers to the use of words or phrases that can be incorporated into sales scripts, advertising messages or web pages that encourage consumers to take prompt action.

Click Me! or Click Me!

Between the two clickable text, which one make you want to click more? I’m certain that you will click the text with button shaped background, because it’s more interesting. Although it’s not guaranteed that your link will be clicked. Let’s see how this can be achieved in your post.

gap
Button πŸ”–

Open your post editor and go to HTML tab. Create an HTML element and add class attribute and give button value to it. <a href="link" class="button">.

Please note that your button style maybe will only available from the reader, when you open your post from the reader. The class button really depends on your theme or css files that loaded in your page. You can force this to work using Inline Style method.

There are places that your post will probably be shown like in th reader, your site or mobile applications. In the current WordPress.com system this inconsistency can be prevented using 2 combined method, Inline Style and Classes.

gap
Inline StyleπŸ”–

The inline style is specific to the tag itself. The inline style uses the HTML style attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The inline style is good for one and individual CSS change that you do not use repeatedly through the site.

There are some ways to apply CSS to your page: Internal Stylesheet, External Stylesheet and Inline Styles. In this case, you only have the Inline Style option. How to do the inline style? You just need to add the style attribute to your tag.

<a href="your.site.url" class="button" style="border: 1px solid black;padding: 4px;">Text Label</a>

Above code is just an example on how to apply inline style, for the complete syntax you can go to more buttons section.

gap
More Buttons πŸ”–

  1. button
  2. button is-primary
  3. button is-scary
  4. button is-compact

<span class="button" style="vertical-align:baseline;background:white;border-color:#c8d7e1;border-style:solid;border-width:1px 1px 2px;color:#2e4453;cursor:pointer;display:inline-block;margin:0;outline:0;overflow:hidden;font-weight:500;text-overflow:ellipsis;text-decoration:none;box-sizing:border-box;font-size:14px;line-height:21px;border-radius:4px;padding:7px 14px 9px;-webkit-appearance:none;-moz-appearance:none;appearance:none;">Button</span>

<span class="button is-primary" style="background: #00aadc;border-color: #008ab3;color: #fff;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;font-size: 14px;line-height: 21px;border-radius: 4px;padding: 7px 14px 9px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Primary</span>

<span class="button is-scary" style="padding: 7px 14px 9px;vertical-align: baseline;color: #d94f4f;background: #fff;border-color: #c8d7e1;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;font-size: 14px;line-height: 21px;border-radius: 4px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Scary</span>

<span class="button is-compact" style="vertical-align: baseline;padding: 7px;color: #537994;font-size: 12px;line-height: 1;background: #fff;border-color: #c8d7e1;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;line-height: 21px;border-radius: 4px;padding: 7px 14px 9px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Compact</span>

Try this link if you can’t see above code.

Advertisements

Published by

yuulye

Male, Indonesian, Muslim, Programmer, 27 y.o. Single by Bye... You are a poet, you just don't know it...

30 thoughts on “Call to Action”

      1. You’re welcome😊😊
        I’ll definitely ask you because WordPress doesn’t like me hahahaπŸ˜‚ Things always go awry. Lol.

        Have a great weekend ahead, Yuulye☺
        Happy to connect with you😊

        Liked by 3 people

      2. It’s my pleasure that you visited here first 😁
        Well, they probably busy because I know things about building something with code, the problems everywhere 🀣

        You too have an awesome one, Pragya, thank you so much for your kindness ❀️

        Liked by 3 people

  1. Guess you didn’t know some of us will be eavesdropping when you reveal to Pragya that Yuulye is not your name! I understand in another post comment that it (Yuulye) is July!
    This post is informative and very helpful.

    Liked by 2 people

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s