Add Call to Action Arrows on a Button

We love drawing our users’ attention to important elements on our pages.  There are numerous ways of doing this: adding a button, increasing the font size or font weight (ie bold), adjusting the font color, adding a background color, etc. We’re going to focus specifically on buttons on this post. 

Sometimes adding a button isn’t enough to identify its relative importance on a page though. So, a way that we’ve found to get our users to see the importance of certain buttons on our pages/posts is by adding call to action arrows on a button.

We’ll show you two different call to action arrow styles that do a great job in focusing your users’ attention to buttons on your page. Examples of these buttons are shown below:

First off, you’re going to want to create a button in the first place.  Here’s some default CSS styling rules for buttons.

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

Now, you want to add the classes to your button.

<a class="btn btn-primary text-white"  data-toggle="modal" data-target=".free-arrow-reward">Subscribe to Download our Hand-Drawn Arrows for Free</a>

Then, you’re going to want to create your arrows.  

The first call to action arrow type consists of one arrow on the left pointing down to the button.  An example of this is shown below.

In order to add this type of call to action button, you need to add the following CSS styling rule to your stylesheet. Make sure that the URLs that is used in your stylesheet is associated with your arrow image and make sure that the width, height and positioning of the arrows are relative to your arrow as well.

.handdrawn-arrow:before {
content:'';
background-image:url(http://your-domain.com/wp-content/uploads/handdrawn-arrow.png);
width:150px;
height:150px;
position:absolute;
left:-150px;
top:-75px;
background-repeat:no-repeat;
background-size:150px;
}

Then, you just need to add handdrawn-arrow class to your existing button:

<a class="btn btn-primary text-white handdrawn-arrow" data-toggle="modal" data-target=".free-arrow-reward">Subscribe to Download our Hand-Drawn Arrows for Free</a>

The second call to action type has two arrows from the left and right pointing to the button between them.  To start, add the button (as described in the previous step). But, this time add the following CSS rules. 

.handdrawn-horizontal-arrows:before {
content:'';
background-image:url(http://your-domain.com/wp-content/uploads/right-arrow.png);
width:150px;
height:150px;
position:absolute;
left:-160px;
top:0px;
background-repeat:no-repeat;
background-size:150px;
}
.handdrawn-horizontal-arrows:after {
content:'';
background-image:url(http://your-domain.com/wp-content/uploads/left-arrow.png);
width:150px;
height:150px;
position:absolute;
right:-160px;
top:0px;
background-repeat:no-repeat;
background-size:150px;
}

Then, add handrawn-horizontal-arrows as a class on your button element.

<a class="btn btn-primary text-white handdrawn-horizontal-arrows"  data-toggle="modal" data-target=".free-arrow-reward">Subscribe to use our Hand-Drawn Arrows for Free</a>

This will then look like the following button.