Howdy Reader 👋🏻

A small detail can make your Elementor design look better. Sometimes, it can be as simple as the button design.

The main goal of every website is to generate conversions. And to generate conversions, you need good click rates.

A simple trick to increase click rates on your website is by making your button look eye-catching. People are likely to click a button if it looks different from buttons they usually see on the internet. This is a natural behavior.

I have four simple tips that you can try to make your buttons look different in a good way.

#1 Use a transparent background and make it blurry

Recently, I created a new hero section template for my project (Pagebuildertemplates.com). I spent hours designing the button for the hero section and ended up with the following design.

I love the final design because it totally blended with the entire design of the hero and added a premium vibe.

To achieve a button design like this, it takes only two core steps:

• Make the background color transparent
• Add the following CSS snippet to the button

#2 Use a different background color for the icon

In the GIF above, you can see that the button icon has a different color from the button. And it looks good. Isn’t it?

But if you only set a different color, your icon will look ugly. You need to style it up further by setting the padding and border radius.

Here is the CSS snippet for this:

#3 Use image as the button background

In the same hero section, I used a different button style and the overall design still looked good. Even better. Here is the button design.

However, I have to remind you in advance if you want to adopt this tip because if you don’t use a proper combination of image and text color, the text may become less visible which leads to a bad user experience.

To avoid this, you can add overlay to the background. Here is the complete CSS snippet if you want to adopt the tip. You can replace the “IMAGE URL” with an actual image URL.

#4 Avoid using default hover effect

Elementor allows you to add a simple animation effect for a button on the hover state. Unfortunately, the control options are extremely limited. You can only set the transition duration. There are no options to set the animation level and other advanced settings.

Also, the default hover effects that Elementor offers are boring. That’s why I rarely use them and use custom hover effects instead.

If you want to make your Elementor design look premium, using a custom hover button effect is a must.

That’s it and good luck.

Talk soon,

Aliko

Founder of Totheweb (UtilizeWP, WPPagebuilders, Pagebuildertemplates.com)