Use These Custom Button Styles to Spice Up Your Call-to-Actions

Buttons are the gateway that links your customers to making that coveted sale on your website. Do your buttons scream for clicks, or just sit in the back waiting to be seen?

Not only does your web design set the tone for how your visitors interact with your website, but the buttons you use in your call-to-actions can make or break the sale.

We’ve all seen the big tacky “Add to Cart” buttons marketers use in their landing pages. These kind of buttons are easy to make fun of, but you can’t question their effectiveness at making the sale.

After all, what could be more obvious than a big yellow button screaming at you to buy a product now? I’ll take loud and tacky over subtle and “polite” any day, especially in the world of sales.

Lucky for you, you’re here in the world of Marketers Delight where we combine beautiful design with effective sales tools.

Today I’m going to reach into my bag of tricks and show you how to spice up your own call-to-actions with the following custom button styles you can add to your site now:

A Brief Introduction to MD Buttons

If you’ve been using Marketers Delight for any period of time, you probably know that creating a simple button is easy as this:

A Simple Button

The HTML:

<a href="#" class="button">A Simple Button</a>

Thanks to MD Helper Classes, creating elements like buttons are easy.

We’ll be building off of the default MD button styles and that little piece of code above, so remember to always start from there when choosing which of the following button styles you want to add to your site.

1. When Push Comes to Click

An effective button can be loud and still get the subtle details right too. For example, we’re all used to seeing a button slightly change color when we hover our mouse over it.

This is a nice old-school effect that helps indicate the button is clickable, but we can do much better with the modern design tools we have today.

Take a look at the button below and give it a click, and really click it like you mean it:

Click me!

Did you feel the button press down as you clicked it? A button is only as good as it feels and the subtle push effect you just experienced can reinforce the feel of a smooth transaction between you and your customer.

This effect is versatile enough to apply to all of your buttons, as I did here on the MD site, and to add this effect to your site simply paste the following CSS into your child theme’s style.css file:

.button {
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.button:active {
	-moz-transform: scale3d(0.9, 0.9, 0.9);
	-ms-transform: scale3d(0.9, 0.9, 0.9);
	-webkit-transform: scale3d(0.9, 0.9, 0.9);
	transform: scale3d(0.9, 0.9, 0.9);
}

Now when you click any button on your site you’ll have this nice push down effect as well.

I showed you this effect first and have applied it to all buttons because it can be easily used on the “louder” button styles I’m about to show you.

But before we really turn up the volume, let’s take a look at a button style that’s great as a secondary button:

2. The Button Outline

Click me!

The HTML:

<a href="#link" class="button button-outline">Click me!</a>

The CSS:

/* BUTTON OUTLINE */

.button.button-outline {
    background-color: transparent;
    border: 3px solid #0093E3;
    border-radius: 3px;
    color: #0093E3;
    text-shadow: none;
}

.button.button-outline:hover {
	background-color: transparent;
	opacity: 0.6;
}

.menu .button.button-outline a {
	background-color: transparent;
	color: #0093E3;
	text-shadow: none;
}

Whether you’re going for a minimalistic site design or want a nice button to use as a secondary call-to-action, the Button Outline is a really classy way to go.

It’s not too loud and can be a great choice alongside your main call-to-action as it doesn’t try to steal the attention.

3. Show Direction with the Button Arrow

Click me!

The HTML:

<a href="#link" class="button button-arrow">Click me!</a>

The CSS:

/* BUTTON ARROW */

.button.button-arrow:after,
.menu .button-arrow a:after {
	content: '\e80f';
	display: inline-block;
	font-family: 'md-icon';
	margin-left: 13px;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	-moz-transition: 0.4s;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.button.button-arrow:hover:after,
.menu .button-arrow a:hover:after {
	-moz-transform: translateX(4px);
	-ms-transform: translateX(4px);
	-webkit-transform: translateX(4px);
	transform: translateX(4px);
}

.menu .button-arrow:after {
	display: none;
}

This is a great button style you can use on your main call-to-actions, like the one on the MD homepage, to indicate a kind of “next step” experience.

You’ll notice that when you hover your mouse over the button, the arrow smoothly transitions to the right, solidifying a smooth experience.

The beauty of this style is that you can apply it to any other button style in this tutorial. Simply add the button-arrow class to any of your buttons to take advantage of this great effect.

4. Add a Price Badge to Your Buy Buttons

Add to Cart $29

The HTML:

<span class="dark button button-badge">Add to Cart <span class="badge">$29</span></span>

The CSS:

/* BUTTON BADGE */

.button.button-badge {
	border-bottom: 0;
	border-radius: 0 2px 2px 0;
	padding-right: 84px;
	position: relative;
}

.button.button-badge .badge {
	border-radius: 0 2px 2px 0;
	font-size: 20px;
	height: 100%;
	padding: 16px;
	position: absolute;
	right: 0;
	top: 0;
}

As soon as I discovered this button style, I immediately raced around the MD site to update all of my buy buttons! This nice effect builds off of the badge helper class and gives you a nice way to display buy buttons with a price attached.

You can also see that I changed the color from the default green to a dark gray by adding the dark helper class to my buy buttons.

5. Get Fancy With a Gradient Button

Click me!

The HTML:

<a href="#" class="button button-gradient">Gradient button</a>

The CSS:

/* BUTTON GRADIENT */

.button.button-gradient {
	background-color: transparent;
	background: -webkit-linear-gradient(left,#25A6CB 0%, #28BD4D 100%);
	background: -moz-linear-gradient(left,#25A6CB 0%, #28BD4D 100%);
	background: -ms-linear-gradient(left,#25A6CB 0%, #28BD4D 100%);
	background: -o-linear-gradient(left,#25A6CB 0%, #28BD4D 100%);
	background: linear-gradient(to right,#25A6CB 0%, #28BD4D 100%);
	border-bottom: 0;
	border-radius: 50px;
	box-shadow: 0 10px 48px -6px rgba(0, 0, 0, .35);
	letter-spacing: 2px;
	padding: 13px 29px;
	text-shadow: none;
	text-transform: uppercase;
}

.menu .button.button-gradient {
    padding-bottom: 16px;
    padding-top: 16px;
}

.menu .button.button-gradient a {
    background-color: transparent;
	padding: 0;
}

Now I know you’ll love this one! With a bit of modern CSS we can create this beautiful button with a gradient that uses no images to create this dazzling effect.

You can see a cool use of this button style in the design we did for Integrity Insurance, but just watch your head as these buttons will literally pop right off your screen!

6. Other Button Effects

At the beginning of this post I showed you how to add a push-down effect to buttons when you click on them. We applied that effect to all of our buttons by using the generic button class, but if you wanted to take a look at some other hover effects, I have a couple I think you might like:

6a. The Grow on Hover Effect

This is probably my favorite hover effect because as the button grows it really sucks you in with it.

Hover over me!

The HTML:

<a href="#" class="button">Hover over me!</a>

The CSS:

.button:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}

6b. Add Shadow on Hover Effect

This effect is more subtle but can be a great effect in the right design.

Hover over me!

The HTML:

<a href="#" class="button">Hover over me!</a>

The CSS:

.button{
	box-shadow: 0 10px 48px -6px rgba(0, 0, 0, 0.2);
}

Bonus: Other Ways You Can Use Buttons in Marketers Delight

As you can see by building off of the default styles in Marketers Delight, we can easily make custom buttons with just about any kind of effects we want.

The great thing about the styles I showed you above is that they can be reused anywhere around your site that accepts HTML. To close off this massive post, here are 2 other ways you can use buttons in MD:

1. Add buttons to your menus

Did you notice the green button in the header menu at the top of this page (I hope so!)?

Add buttons to the MD header

Add button to header menu

To make your own menu links a button, simply navigate to the Menus panel in your WordPress admin panel and add any button class to the menu item of your choosing.

(Note: you may first need to activate the CSS Classes menu option by clicking the Screen Options tab at the top of the screen (see screenshot) then enable CSS Classes)

The only requirement for making a menu item a button is to add the button class to the menu item. From there you can add any of the other button classes above, or pick your own color.

Speaking of button colors…

2. Add your own button colors

MD comes with quite a few button colors out-of-the-box, including:

  • green (default)
  • orange
  • blue
  • purple
  • gray
  • dark

…which you can mix-and-match in a variety of ways:

<a href="/pricing/" class="blue button">Get MD tody →</a>

With very simple CSS you can make your own button colors for use in any button style as well. Just follow this simple syntax and choose your own color names and hex codes to match your brand:

.button.newpurple {
	background-color: #9334F9;
}

.button.newpurple:hover {
	background-color: #6662E6;
}

Is That Enough Button Styles For You?

As you can tell, there are tons of ways to customize buttons and I had to force myself to stop here. The styles I’ve outlined in this post should get your creative juices flowing and your buttons getting clicked more.

Over to You:

Out of all the styles in this post, which is your favorite effect? Leave a comment below and let me know, and show me how you’re using these button styles on your own site!

17 comments add yours

  1. This is pretty cool! I just set up a combination of the first ‘reduce-on-click” option and the grow on hover and I really like it. Works smoothly. These little differences can add up. Thanks for this!

  2. I’m always impressed with the built-in subtleties of MD.

    My favorite button is the ‘price badge’ button – a clear, stylish call to action.

    thanks

    • Lots of themes focus on the big flashy “do anything you want” kind of stuff, I’m hoping all of the small details that have gone into MD over the years end up painting a bigger, more beautiful picture.

      Thanks for all the support man!

      • Hey Alex,

        How do I replace the “Learn more →” link in my column boxes with the button outline?

    • Hey Tim, there are some basic button classes like button and some of the colors (see the post). The point of this post was to give you a variety of styles that aren’t available in MD that you can add to your child theme if you like.

  3. Hmm, It does not seems to work on my site though. I wonder because I changed the default color code for the button?

    Example:
    https://www.ptcn.me/ebook-ban-do-tu-duy/

    1. Menu “Bắt Đầu” was changed to button outline, but nothing happened.
    2. All other CTA button in this was changed to arrow button, but nothing happened.

    Would you like to take a look Alex?

    • Hey Nhat, nice work with the buttons! Maybe it was a cache issue as I can see the nice button effects on your site.

      Let me know otherwise.

  4. Alex, I love the new buttons. I have started using the gradient buttons and they are perfect!

    Added the CSS for a new color but am having trouble getting them to work. I called it newblue but when I change class=”blue button”> to class=”newblue button”> I get a green button. Any suggestions are always appreciated.

    • Hey Richard, glad to see the gradient buttons on your site! I’m glad these new little tutorials are able to help.

      I tried out the newblue class on your site and was able to get the blue button to come up (see screenshot).

    • Glad to hear! I think that’s my favorite button style from this post (you know, because it makes you money!).

  5. as usual alex; so perfect.
    for me; i’m looking to add a : New to menu item like you did in Drop in ?.

    • Hey Stephen, no shortcodes but once you install the CSS, the code is easy as writing a regular link with an added class:

      <a href="#url" class="button button-arrow">Link</a>

Leave a Comment