{"id":36046,"date":"2020-02-03T17:52:54","date_gmt":"2020-02-03T17:52:54","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=36046"},"modified":"2020-02-03T17:52:54","modified_gmt":"2020-02-03T17:52:54","slug":"how-to-design-effective-buttons-for-wordpress-websites","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/","title":{"rendered":"Monday Masterclass: How to Design Effective Buttons for WordPress Websites"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

It’s high time that we pushed buttons beyond our basic understanding of what they are, what they can do, and what they should look like.\u00a0<\/p>

Buttons are one of those seemingly simple elements on a webpage<\/a> that are so inherent of its structure and design, we might be taking them for granted.\u00a0<\/p>

I say \u2018seemingly’ because a well placed, well designed button is one that draws us to interact with it, so subtly, that we never even stop to think how someone is deliberately luring us to do so.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

What Are Buttons?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In the real world of the twenty-first century, buttons are veritably intrinsic to our daily day-to-day routine. Wherever we go, whatever we do, we\u2019ll find buttons to turn appliances ON or OFF, or to activate and deactivate the functions of that appliance.<\/p>

Naturally, this functionality was adopted by the engineers behind the very first computers. Some of you may remember, way back in the early days of personal computers, we would hit the RETURN or ENTER key to acknowledge that we indeed wanted our system to run our commands.<\/p>

Later, in the initial days of the Internet, once web pages had begun appearing, we used hyperlinks.\u00a0<\/p>

Then when the infrastructure and hardware expanded enough to allow us to use images, we would include an illustration that we would click or tap on, to activate that command; practically imitating the functionality of physical buttons in the real world.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Types of Digital Buttons and When to Use them<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

The Text Button<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The earliest, and some might say, the most primitive form of digital button is the Text button. Visually, a text button is nothing more than a length of text, from word to a short sentence. It resembles and functions in much the same way as hyperlink.\u00a0<\/p>

This style of button can appear anywhere on the page. We see it as the familiar \u201cRead More\u2026\u201d button we\u2019re used to seeing at the end of a paragraph or a block of content.
Although they\u2019re probably more common in headers and footers as buttons of a site menu.<\/p>

In fact there are several do\u2019s and don\u2019ts that we learnt in our Masterclass on designing menus<\/a> that also apply to buttons.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Hoppers_Boulder_Blog_text_buttons_WordPress_elementor\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: The Hopper<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Regardless of what style of button you are designing, the text must be readable. As a rule of thumb, keep the text of the button the same size or larger than the body or paragraph text.<\/span><\/p>

Also try to avoid convoluted fonts, such as cursive and hand-written fonts that are difficult for non-native English speakers to recognize.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Cursive_text_design_button_wordpress_elementor\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: Google Fonts<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Beyond recognizing the text of a button, it\u2019s also important to make sure that our buttons signify, to the user, that they are something to be clicked or tapped on.\u00a0<\/span>I know that this might seem rhetorical to many of us, but making sure that an element is overtly perceived as clickable is not as obvious to all\u00a0 web-builders out there.\u00a0<\/span><\/p>

In the evolution of the digital button, the next stage opened up many ways to do this button.\u00a0<\/span><\/p>

Of course, I\u2019m referring to Image or Icon<\/a> buttons.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

The Image or Icon Button<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This is a button that includes a graphic attribute that sets it apart from the other elements on a page.\u00a0<\/p>

We can do this by using a block of contrasting color, that not only contrasts the environment surrounding the button, but also creates an internal contrast with the text, image or icon inside the button element.\u00a0<\/p>

You may recall that we used this style of button to trigger a popup with a menu in the Travel & Tour template kit<\/a>.<\/p>

Combining an icon and a modicum of text is usually enough to imply that this element was designed to be clicked. Nonetheless, adding digital graphic effects, such as drop shadows, bevels (inner shadows), box shadows, gradients, etc. are welcomed solutions too.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"button_styles_wordpress_elementor_plus\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: The Plus Addons<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Beyond making the buttons stand out, these effects are used to make the button appear more realistic. A design trend that was popularised by Apple years ago. For most designers this trend is known as Skeuomorphism.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Skeuomorphism\/Neomorphism<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Skeuomorphism<\/a> is when we deliberately design a virtual element to look very much like its counterpart in reality. Doing this triggers familiarity among the users making it easier for them to understand the user interface and hence more likely to react and click or tap on the buttons.<\/p>

Over the past few weeks there\u2019s been lots of buzz to suggest that skeuomorphism is making a comeback, some are calling this new brand of realism, Neomorphism<\/a>. Personally, I think that it\u2019s still too early to say. But I am very excited to see where adventurous designers take this idea.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Keeping Your Buttons in a Good Shape<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You may have noticed that, so far, all of the buttons we\u2019re looking at are either circular, squared, or rounded squares and oblongs. We\u2019d be hard pressed to find buttons in complex, non-symmetrical shapes. An octagon or pentagram might look great, but chances are that few people besides yourself will recognise it as a button.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"button_shape_design_wordpress_elementor_plus\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: The Plus Addons<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You may recall the trouble Microsoft had in 2007<\/a> when they used the Office logo as a button and most people assumed that it was there to look pretty and had no function at all. The button, affectionately known as the pizza button, was in fact supposed to give us access to the software\u2019s fundamental functions such as new document, save, settings etc.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Button Size and Spacing<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If in our simple-shaped button, we’re combining icons and text we want to make sure that the icon is placed logically with regards to the action that we want the user to perform.<\/p>

For example, on a button that takes us to the next page, we want an arrow icon to appear after the text. As if to say \u201cclick here and then THIS will occur\u201d.\u00a0<\/p>

If we’re designing a button to assist users in returning to the top of the page, the upward-pointing arrow should appear above the text.\u00a0<\/p>

Whether you’re using text, icons, or both, the last thing we want to do is cram our content into the buttons surface.<\/p>

Some suggest leaving a border of 25 pixels surrounding the button’s label.<\/p>

But I find that a great rule of thumb, is to leave clear space around the content of the button at the height and width of a character or icon that we’re using. As for the size of an icon placed alongside text, again, keeping the icon the same size as the text or a little larger, is the way to go.<\/p>

As for the size of the button itself, I suppose the toughest decisions are for mobile screens. This is especially true if our design process or workflow is Mobile First. Once we\u2019ve figured out the size of our button for responsive<\/a> view, we can scale it of for desktop<\/p>

There are recommendations from the industry giants: Apple suggests that for mobile designs, main buttons, or call-to-action buttons, should be at least 44 x 44 pixels. Microsoft recommends using slightly smaller buttons, of 34 x 26 pixels.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"Spacing_Button_design_wordpress_elementor\"\t\t\t\t\t\t\t\t\t\t\t
Example of internal spacing for effective button design.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

What Is the Perfect Position for a Button?\u00a0<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The position of a button is also very important.<\/p>

Tradition and standard design place buttons within the areas that are easy to scan with our eyes: main blocks of content, along the margins or the corners.<\/p>

Remember that we need to make the user interaction enjoyable, and a lot of that boils down to ease of navigation, that needs to be simple and intuitive. The user’s eyes should follow the path we\u2019ve laid out in our design without getting distracted.\u00a0<\/p>

We should also establish a visual hierarchy for the user to understand what parts are more important, and skip over the rest.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"Elementor_button_design_attributes_wordpress\"\t\t\t\t\t\t\t\t\t\t\t
<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If our button’s action takes the user to another page, if we have a Paypal button that sends the user to a Paypal login page,for example, we might want to consider whether or not we want this to open this in a new and separate tab. Of course, this depends on the predicted behavior of our target audience and how long this process will take before they return to our page. We don’t want them away for too long.\u00a0<\/p>

We can determine this with all our buttons in Elementor, by going to the button\u2019s content settings and next to the link box, we\u2019ll click on the settings or cog icon, that will bring up options to open the link in a new window and or add no-follow to this action.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

When Should a Button Steal Focus? When Should a Button Be Subtle?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

We can all agree that not all buttons should be so obvious that they dominate the focus of a page. <\/p>\n

And this brings us to another aspect we should consider whenever we design buttons: its purpose and importance.<\/p>\n

If we\u2019re designing a landing page<\/a>, for example, our page will be constructed so to draw users to a focal point, where we\u2019ll place a Call-To-Action. Today we tend to represent our Call-To-Action, or CTA as a button, so that we get that confirmation from the user that we spoke of earlier. In this case the button is of high importance, so it should stand out as something special, as the main attraction, to entice the curious or interested user to interact with it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

The Floating Action Button (FAB)<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A great style of button that designers often employ for this purpose is the Floating Action Button.<\/p>

These are buttons that, as defined by Google<\/a>, as buttons that are intended to perform the primary, or most common, action on a screen. This could be an action on the current screen, or an action taking us to a new screen. Typically they appear as a circular shape floating, with an icon at its center, above all the content of a page, over one of the sides or in one of the corners of the page. There are three types of FAB: regular, mini, and extended, which provides an additional selection of popular options on the app.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Floating_Action_Button_responsive_Elementor_wordpress.\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Example of sites using FABs in responsive mode. Source: Google<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

These are very common in responsive design, as they convey their purpose instantly and are very easy to see and tap, on a mobile screen.\u00a0<\/p>

The sooner a user recognizes an element as a button, the sooner they understand how to navigate the page and and interact with it. The lack of clarity, in this sense, will leave an impatient user frustrated enough to leave the page altogether.<\/p>

A popular and simple graphic trick we can employ to avoid this is by adding animation or hover effects, changing color, font or text. Perhaps hovering triggers the button to shake or jiggle. These help to highlight the fact that there is something different about the element. Inviting curious users to click on it and find out what happens when we click on it. Further animation effects help to assure the user that the button has indeed been pushed and that the resulting action, if not immediate is at least in progress.<\/p>

If, for example, we\u2019re designing an About page, or a Blog Post page, our goal will be exactly the opposite. We\u2019ll want to keep users on the page to take in the content.<\/p>

So in cases such as these, a big flashy button drawing all the attention and focus is the last thing that we need. Instead we\u2019ll use buttons with a subtle design, so that they don\u2019t stand out against the background too much, because it is of secondary importance.<\/p>

A style of button that we could use to achieve this would be the Ghost button.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"ghost_button_design_wordpress_elementor_plus\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: The Plus Addons<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

The Outline or Ghost Button<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This is basically a text button with little or no background and an outline around it. They are elegantly subtle, and as such, they tell the user that they\u2019re not the primary activity of the page. These are buttons that we use when we want users to be aware of, in the back of their mind, throughout their experience. They could be buttons to take the user back to the top of the page, for instance.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"Sticky_button_design_elementor_wordpress.\"\t\t\t\t\t\t\t\t\t\t\t
<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In Elementor we can very easily make them sticky elements, sticky buttons that follow the user down the page as they browse through the content. This way they\u2019ll always be right there on the screen, ready to be used, like a chatbot button.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Service vs. Sales: How to Prioritize Buttons in Our Designs<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Buttons can cater to many types of purpose, all of which we could classify into two groups: Service that includes help buttons, login buttons<\/a>, chatbot buttons, even cookie notifications and in some cases download buttons. <\/p>\n

Then we have the sales category where we\u2019ll find social share buttons, subscription buttons, buy, add to cart etc.<\/p>\n

Just hearing those titles, we can already get an idea of the level of importance associated with each one.<\/p>\n

And it\u2019s this way of thinking that we need to utilize when we sit down to design pages and the buttons that we\u2019ll be including.<\/p>\n

If we\u2019re already speaking of buttons in plural…<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

How Many Buttons Should We Use Per Page?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Most professionals try to limit the number of attention hogging buttons to one but no more than two per page.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"combining_different_button_design_wordpress_elementor\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: The Social Catering Co.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Of course you can add several more buttons of a subtle design, as needed, but you don\u2019t want to have too many. This tends to confuse and overwhelm some users.\u00a0<\/p>

Remember that we\u2019re designing web pages and don\u2019t want them to look like the control panel of a passenger jet or the sound console of a big name recording studio.<\/p>

If you absolutely need to use a large amount of buttons, if let\u2019s say we need to make a registration or order form with many binary queries or yes\/no questions; we can use toggle or switch buttons.<\/p>

These are very straightforward and easy to use, and equally easy to add in Elementor.<\/p>

So yes, both the design of the button is as important as its functionality. Equally important, if not more so, is how the design of our button complements and corresponds with the overall design of the page.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Plus_addons_plugin_buttons_elementor_wordpress\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: The Plus Addons<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Where to Find a Great Resource for Buttons\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Yes, every element we place on our pages should remain consistent and loyal to our design theme or idea.\u00a0<\/p>

To ensure that we can always create the perfect buttons for our page, we’d like to share a site that is an Aladdin’s cave of designs for buttons, all of which work perfectly with Elementor.<\/p>

\u201cThe Plus<\/a>\u201d is a treasure trove where we can find all the types of buttons that we just discussed.\u00a0<\/p>

Some with shading, some with gradients, many also include animation and hover effects and here we can also see a lovely example of a skeuomorphic button, mimicking a realistic button.<\/p>

The Plus plugin is installed through the WordPress dashboard, the same as we would any other plugin, then activated.<\/p>

Then, when we open a page to edit with Elementor, and we go to the widget library in the left hand panel, we\u2019ll find a series of dropdown lists of all of the Plus widgets that are available. Obviously, some are only available to Plus Premium users. But whether or not you want to get the pro version depends on what you need for each individual site.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"Plus_elementor_widget_button_design_wordpress\"\t\t\t\t\t\t\t\t\t\t\t
The Plus Addon widgets in Elementor Editor<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Bringing It All Home<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This week, we reviewed buttons, beginning with the basics, understanding what they are, what they do, why we need them. Then we went beyond and looked at various designs, and styles and how they affect the users that we are trying to bring to our sites.\u00a0<\/p>

More importantly, we went through a lot of great rules of thumb, do\u2019s and don\u2019ts and told you about The Pluss, a fantastic resource for button designs that work perfectly will anything that we create with Elementor.<\/p>

In fact, this masterclass, we\u2019ve gone over everything we could possibly need to create the kind of buttons that the late Steve Jobs<\/a> would refer to as buttons that look so good you’ll want to lick them”.<\/p>

As always, if you have any further advice, tips or insight that could help other users with their designs, please share it in the comments below. If you\u2019d like to share examples of buttons that you\u2019ve designed or that have inspired you, this is the place.<\/p>

If you have any criticisms, we are equally interested in your thoughts. After all, our goal is to be the best at helping others excel at their craft.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

This week we look at how to design the best buttons for our WordPress sites. We explore the versatility and functionality of primary\/secondary buttons, what buttons to use in responsive mode, and introduce a wonderful plugin that does it all.<\/p>\n","protected":false},"author":162405,"featured_media":36047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[37,43],"tags":[79,173],"marketing_persona":[74],"marketing_intent":[49],"class_list":["post-36046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-masterclass","category-wordpress","tag-build","tag-video"],"acf":[],"yoast_head":"\nMonday Masterclass: How to Design Effective Buttons for WordPress Websites<\/title>\n<meta name=\"description\" content=\"This week we look at how to design the best buttons for our WordPress sites. We explore the versatility and functionality of primary\/secondary buttons, what buttons to use in responsive mode, and introduce a wonderful plugin that does it all.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Monday Masterclass: How to Design Effective Buttons for WordPress Websites\" \/>\n<meta property=\"og:description\" content=\"This week we look at how to design the best buttons for our WordPress sites. We explore the versatility and functionality of primary\/secondary buttons, what buttons to use in responsive mode, and introduce a wonderful plugin that does it all.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-03T17:52:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2020\/02\/1200x628-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Simon Shocket\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Shocket\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\"},\"author\":{\"name\":\"Simon Shocket\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6\"},\"headline\":\"Monday Masterclass: How to Design Effective Buttons for WordPress Websites\",\"datePublished\":\"2020-02-03T17:52:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\"},\"wordCount\":2849,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/02\/1200x628-cover.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Monday Masterclass\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\",\"url\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\",\"name\":\"Monday Masterclass: How to Design Effective Buttons for WordPress Websites\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/02\/1200x628-cover.png\",\"datePublished\":\"2020-02-03T17:52:54+00:00\",\"description\":\"This week we look at how to design the best buttons for our WordPress sites. We explore the versatility and functionality of primary\/secondary buttons, what buttons to use in responsive mode, and introduce a wonderful plugin that does it all.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/02\/1200x628-cover.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/02\/1200x628-cover.png\",\"width\":1200,\"height\":628,\"caption\":\"howto design buttons wordpress elementor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Monday Masterclass\",\"item\":\"https:\/\/elementor.com\/blog\/category\/masterclass\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Monday Masterclass: How to Design Effective Buttons for WordPress Websites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6\",\"name\":\"Simon Shocket\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g\",\"caption\":\"Simon Shocket\"},\"description\":\"With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that\u2019s a lot to live up to.\",\"sameAs\":[\"http:\/\/simon.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/simon-shocket\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Monday Masterclass: How to Design Effective Buttons for WordPress Websites","description":"This week we look at how to design the best buttons for our WordPress sites. We explore the versatility and functionality of primary\/secondary buttons, what buttons to use in responsive mode, and introduce a wonderful plugin that does it all.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/","og_locale":"en_US","og_type":"article","og_title":"Monday Masterclass: How to Design Effective Buttons for WordPress Websites","og_description":"This week we look at how to design the best buttons for our WordPress sites. We explore the versatility and functionality of primary\/secondary buttons, what buttons to use in responsive mode, and introduce a wonderful plugin that does it all.","og_url":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2020-02-03T17:52:54+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2020\/02\/1200x628-cover.png","type":"image\/png"}],"author":"Simon Shocket","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Simon Shocket"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/"},"author":{"name":"Simon Shocket","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6"},"headline":"Monday Masterclass: How to Design Effective Buttons for WordPress Websites","datePublished":"2020-02-03T17:52:54+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/"},"wordCount":2849,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/02\/1200x628-cover.png","keywords":["Build","Video"],"articleSection":["Monday Masterclass","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/","url":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/","name":"Monday Masterclass: How to Design Effective Buttons for WordPress Websites","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/02\/1200x628-cover.png","datePublished":"2020-02-03T17:52:54+00:00","description":"This week we look at how to design the best buttons for our WordPress sites. We explore the versatility and functionality of primary\/secondary buttons, what buttons to use in responsive mode, and introduce a wonderful plugin that does it all.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/02\/1200x628-cover.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/02\/1200x628-cover.png","width":1200,"height":628,"caption":"howto design buttons wordpress elementor"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Monday Masterclass","item":"https:\/\/elementor.com\/blog\/category\/masterclass\/"},{"@type":"ListItem","position":3,"name":"Monday Masterclass: How to Design Effective Buttons for WordPress Websites"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6","name":"Simon Shocket","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g","caption":"Simon Shocket"},"description":"With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that\u2019s a lot to live up to.","sameAs":["http:\/\/simon.com"],"url":"https:\/\/elementor.com\/blog\/author\/simon-shocket\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/36046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/162405"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=36046"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/36046\/revisions"}],"predecessor-version":[{"id":93876,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/36046\/revisions\/93876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/36047"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=36046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=36046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=36046"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=36046"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=36046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}