These CSS3 Buttons Bedazzle Me into Submission – What About You!

Take action to see reward. Do nothing and be ignored. ~ Matthew E. Fryer

Perhaps nowhere is the axiom truer than on the web, on the pages in your websites, where the buttons you create vie for the attention of your visitors to take ACTION.

The abbreviation CTA for Call to Action is a reflection of human affinity looking for taking action.

And so much thoughts, research, and yes, actions have gone into making CTA buttons more pleasurable, more likeable, and more ‘actionable’ to the visitors of a website.

You’d have come across, and fallen in love with the modern CSS3 buttons in different websites. They look so stunning, and at the same time so easy to use that it’ll be torture for your viewers if you don’t start using them.

Here let us look at some of the techniques to create CTA buttons as you want them.

Before that a quick checklist of 6 neat ways to make a CTA button more actionable in your website.

If you wish to skip the checklist, scroll down this page, or click here.

 

6 Ways to Make CTA Buttons Actionable

As Andy Crestodina of Orbit Media says:

Success or failure comes down to a single click… One small factor that makes a big difference is the design of the button itself.

So here are 6 tips from him to make buttons more actionable.

One – Use action oriented verb

When anyone clicks on a button, she is taking an ‘action’. And she takes that action when you ask her to.

So, instead of bland statements like –

  • Email Updates
  • Latest Arrivals
  • More Insights

…use action-taking verbs as under:

  • Signup for Email Updates
  • Check Our Latest Arrivals
  • Click Here for More Insights

Two – The WYLTIWLT test

WYLTIWLT stands for ‘Would you like to? / I would like to’.

The idea is, by using these texts before the button statement, you can check out if it makes sense.

  • Would you like to {button text}?
  • I would like to {button text}.

Let’s take 2 examples above to apply the test.

  • For the button text “Signup for Email Updates,” it’d be “Would you like to sign up for email updates?” and “I would like to sign up for email updates.” Since it works both ways, this button passes the test.
  • When the button text is “Check Our Latest Arrivals,” it’d be “Would you like to check our latest arrivals?” and “I would like to check our latest arrivals.” Since the second version doesn’t fit the voice of the visitor, this doesn’t pass the test.

Thus, in the second example the button text can be changed to ‘Check Out Latest Arrivals.‘ Or perhaps ‘Take a Look at Latest Arrivals.

For more on WYLTIWLT, read this article by Jonathan Richards.

As an ideal example, look at the CTA texts Facebook uses for their buttons (image below). They all pass the WYLTIWLT test.

Facebook's CTA button texts

Three – Using contrasting colors

In her 1933 study, German researcher Hedwig von Restorff found that in an array of similar items people always remember the one that is uncommon, one that stands out.

It’s fundamental to the human eye and brain, and is called the Isolation Effect.

For button designers this is a cue to use colors that contrast or at least complement with the surroundings on a web page.

Take a look at the following image on my homepage where both the button color and the hover color contrast against the deep blue background.

Contrasting colors in CSS3 buttons

Four – Is the button big enough to ‘touch’?

Blame this on advent of technology – not everyone browses your webpage with a mouse in hand.

For those accessing on small screens, the button size needs to be at least 45×57 pixels.

This is the average touch-size of index finger as found out by MIT Touch Lab in a research work.

But, you may argue, many people work with their thumbs on the small screen.

That’s right, and so, keeping that in mind, the button size should be made a bit longer – 45×72 pixels.

Five – Make ‘commitment’ lower

People are wary of committing themselves on the web.

Statistics show that savvy shoppers make 9 visits to a retailer’s site before deciding to buy.

In a similar finding, Expedia informs that up to 45 days leading up to a booking, consumers on average visit travel sites 38 times.

Viewers are skeptical in making big commitments, which is the reason why ‘Shop Now’ is a better button text than ‘Buy Now’.

Six – Codes over images

Many designers shy away from using image as a button since it takes longer to load. Also image buttons may not show up in emails, and are inaccessible to viewers with disabilities.

With so much on the negative side, the solution is to use CSS codes instead of images. And know what, you can create lovely buttons with pure CSS and HTML, and you can do that easily.

Let’s look at some of the ways to create nice-looking CSS3 buttons.

 

CSS Gradient Button

CSS gradient button

This is an easy and fast way to create a CSS gradient button. As the image above shows, the button is created with deep blue-black shades, with border radii of 20px on the left side and 5px on the right.

The font is 16px Tahoma with 10px padding, text color white (#FFF) and text shadow black (#000). All these parameters can be changed as you want, and you can see the result immediately.

The CSS code is given, as well as the HTML markup. The question is, where to put this CSS code, especially if you’re going to use this button on a single post or page.

If you’re using self-hosted WordPress, you can add page-specific CSS (and JS) with the help of a plugin.

I’ll explain this at the end of this article.

 

Button Optimizer

CSS button with text and PNG image

If you want to include a relevant icon either before or after the button text, then the free button generator is a good option.

In the image above I wanted the Skype icon in the button, so I searched for it in the search box bottom left. And from the results I chose the icon for the button as you can see.

Here you can get the button in both CSS code and as PNG image. Of course, code is always better than image – we covered that! 🙂

 

CSS-Tricks’ Button Maker

Easy CSS Button Maker

Perhaps nothing is as cool, easy, and stylish as the button maker from CSS Tricks.

There are 10+1 controls in the tool. Three of them are sliders to respectively adjust a) the padding, b) the text size, and c) the border radius.

Seven controls are for selecting the different colors, and the last one is to select the font family.

It’s fun using button maker.

It reduces the clutter, and you can make your button in just minutes. After that get the CSS code, and use it in your website.

 

DIY Transparent Button

Schedule Consultation

ionicons_2-0-1_person-stalker_24_0_8e44ad_none.pngSchedule Consultation

I’m a fan of transparent button. In my experience it can look elegant especially when the button is placed on a background image or a solid or gradient color.

See the buttons above in actual working condition. Hover your mouse on them and see how they work.

The good thing is, it is not difficult to create a transparent button. The code is lightweight compared to gradient buttons above.

As you can see, at the top I’ve used an icon font from Font Awesome, and in the next one a transparent PNG icon-image is used in the button.

The PNG icon-image is built by converting the icon font to PNG image.

You’ll notice that the Font Awesome icon-font changes colors on hover, but the icon-image doesn’t. This can be very handy for using Font Awesome icon fonts imaginatively in a wide range of uses.

The codes for both the buttons are given below:

<div style="width: 90%; margin: auto; padding: 5px; text-align: center; vertical-align: middle; padding: 30px 0 10px; border: 1px solid #f0f0f0; background: url(https://hubskills.com/wp-content/uploads/stripebg.jpg) repeat;">
<style type="text/css" scoped="scoped">
.button {
background: transparent;
border: 2px solid #2ad4ff;
color: #2ad4ff;
padding: 15px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
font-weight: 600;
text-shadow: 1px 1px #111;
text-transform: uppercase;
letter-spacing: 1px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
background: rgba(170,210,255,.3);
border: 2px solid #00ffd4;
color: #00ffd4;
text-shadow: 1px 1px 2px #111;
}
</style>

<a href="https://calendly.com/hubskills/30min" class="button"><i style="font-size: 22px; margin-right: 7px;" class="fa fa-coffee"></i>Schedule Consultation</a>

</div>

<div style="width: 90%; margin: auto; padding: 5px; text-align: center; vertical-align: middle; margin-top: 40px; padding: 30px 0 10px; background: linear-gradient(to right, blue, white, grey); ">
<style type="text/css" scoped="scoped">
.button1 {
background: transparent;
border: 2px solid #666;
color: #666;
padding: 15px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
font-weight: 600;
text-shadow: 1px 1px 2px #fff;
text-transform: uppercase;
letter-spacing: 1px;
margin: 4px 2px;
cursor: pointer;
}
.button1:hover {
background: linear-gradient(to right, rgba(170,210,255,.1), rgba(240,240,240,.9), rgba(170,210,255,.1), rgba(240,240,240,.9));
border: 2px solid #2b2b2b;
color: #444;
}
</style>

<a href="https://calendly.com/hubskills/30min" class="button1"><img style="margin-right: 8px;" src="https://hubskills.com/wp-content/uploads/ionicons_2-0-1_person-stalker_24_0_8e44ad_none.png" alt="ionicons_2-0-1_person-stalker_24_0_8e44ad_none.png" width="24" height="24" />Schedule Consultation</a>

</div>

<div style="clear: both;"></div>

 

Buttons with Font Awesome Icon Fonts

Font Awesome icon fonts are like a whiff of fresh air in the squalid world of button making with the usual web fonts. In fact, the FA icons are used by web designers for myriad purposes – in menus, forms, and more.

There are so many icons – 634 in the latest count – that you’ll be spoilt for choosing the ‘best’ one for your need.

There are many examples to choose from for designing buttons.

And, if you make a small change like adding the class ‘fa-spin’ to the ‘a’ tag, you can get the same button (shown above) as under:

Schedule Consultation

 

What Else?

Good you asked. There is still a lot more.

I’m the person who loves exploring whatever options are available to peek in. So here are a few options for you (I love) in no particular order:

Know what, there is no end to how differently and distinctively you can create buttons. This article is a small example of that. So, explore the web to discover what more you can do to design the CSS buttons on your website.

Meanwhile, share your take on button designing in the comments box below.

***
Remember I spoke about using page-specific CSS code? Well, I use a plugin for that, called Insert JavaScript & CSS.

It’s fairly easy to use, and I’m sure you can do it in no time. If not, just get in touch with me at team@hubskills.com.

Meantime, don’t forget to leave your comments below.

2016-10-13T11:30:22+00:00 Web Design|

Leave A Comment

You Deserve A Career You Love

Get all the practical tips to plan your online teaching strategy and successfully launch your education website online 
Download Ebook
No Thanks!
close-link
This is a Special Ebook for online teacher

Online Teaching Guide

for Solo Unaided Teachers
Download Now
Get the e-book! Start planning your education website today.
close-link

Learn Some PowerPoint Tricks?

Get 7 unique PPT video tricks delivered straight to your inbox!
I WANT THIS!
Close