Best Practices for Call to Action Buttons

July 25, 2016 8:44 pm Published by Leave your thoughts

For buttons, please use <button></button>.

So many times, I see <a href> tag being misused like this.

<a href="#" class="scrollup"></a>

Of course this works. Buy why use it to create a fake button?

Perhaps some front-end developers feel uncomfortable styling a button?

Call to action in web design, particularly in user experience (UX), is a term used for elements in a web page that solicit an action from the user.

“Scroll to top of the page” button is clearly soliciting an action from a user. The user isn’t moving to a different page or url. You would only use href tag if you are intending to take the user to a different page. So stop it!! It’s annoying. hahaha

Anyhow, I recently needed to create a “scroll to top” call to action button.

scrollup_button

I wish to share how I used old school special html character and combined it with css3 to create a scroll to top button.

First the html.

<button class="scroll_to_top" type="button">
<span id="up_button_chevron">❮</span>
</button>

Many young developers who started to develop after css became mainstream may not know about html special characters. Html Special characters can display uncommon characters not found on a keyboard.

I’ve got my left pointing chevron from here.

http://www.ascii.cl/htmlcodes.htm

There isn’t an upward pointing chevron, at least I couldn’t find one that’s supported on all browsers. So left pointing chevron is what I am using.

Now the css.

  .scroll_to_top {
  display: inline-block;
  color: dodgerblue;
  border: none;
  width: 2.5em;
  height: 2.5em;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  border-radius: 50%;
  box-shadow: 0px 0px 20px 0px rgba(0,20,66,1);
}

Pretty much self-explanatory. I am sure no explanation is needed.

But what about left pointing chevron? Just rotate it 90 degrees.

#up_button_chevron {
transform: rotate(90deg);
}

That’s the crux of the scroll up button. See? Styling button is just like styling any other element & it’s not difficult at all.

Tags: , , ,

Categorized in:

This post was written by hackya

Leave a Reply

Your email address will not be published. Required fields are marked *