In this Monday MasterClass, we look at designing effective buttons for WordPress pages, going beyond our basic understanding of what they are, what they can do, and what they should look like. We explore the versatility of buttons, in both design and function and introduce “The Plus Addons”, a wonderful plugin designed to integrate and expand the variety of options in Elementor even further.
this week we’re tackling toggles
surveying switches categorizing clickers
and bearing the light upon the subject
of buttons yes in this Monday master
class we’re pushing buttons beyond our
basic understanding of what they are
what they can do and what they should
look like and in fact we’ll be sharing a
fantastic resource for budding designs
that work perfectly with elemental you
press the button we do the rest was the
famous advertising slogan that George
Eastman founder of Kodak coined back in
and a half later using virtual buttons
to do exactly the same thing now buttons
are one of those seemingly simple
elements on a webpage that are so
inherent of its structure and design we
might be taking them for granted and I
say seemingly 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 in the
our daily life as peanut butter is to my
daily diet in the real world buttons are
there to turn appliances on and off and
activate and deactivate functions of
that appliance by pushing a button
we the users are consciously confirming
an action yes I would like this kettle
to boil now yes I would like this light
to be off now so naturally this
functionality was adopted by engineers
behind the very first computers and some
of you may remember way back in the
early days of personal computers how we
would hit the return or Enter key to
acknowledge that we indeed wanted our
system to run our commands now later in
the initial days of the internet once
web pages have begun appearing we used
hyperlinks then when 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 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 a word to a
short sentence it resembles and
functions much the same way as a
hyperlink
this style of button can appear anywhere
on the page such as the familiar read
more button we’re used to seeing at the
end of a paragraph or a block of content
though they’re probably more common in
headers and footers as buttons of a site
menu in fact there are several do’s and
dont’s that we learnt in our last master
class on designing menus that also apply
to buttons so regardless of what style
of button you’re designing the text must
be readable as a rule of thumb keep the
text of the button the same size or
slightly larger than the body or
paragraph text also try to avoid
convoluted fonts such as cursive and
handwritten fonts that are difficult for
non-native English speakers to recognize
beyond recognizing the text of a button
it’s also important to make sure that
our buttons signify to the user that
there are something to be clicked or
tapped on I know that this might seem
somewhat rhetorical to many of us but
making sure that an element is overtly
perceived as clickable is not as obvious
to all web builders out there in the
evolution of the digital button the next
stage opened up many ways for us to do
this of course I am referring to the
image or icon buttons these are buttons
that include a graphic attribute that
sets it apart from other elements on the
page and 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 elements you may
recall that we use this exact style of
button to trigger a pop-up with a menu
in the travel and tour template kit
combining an icon and a modicum of text
is usually enough to imply that this
element was designed to be clicked on
nonetheless adding digital graphic
effects such as drop shadows bevels
gradients at set
are welcome solutions to be on making
the buttons stand out these effects are
used to make the button appear more
realistic a design trend that was
popularized my Apple years ago for most
designers this trend is known as
skeuomorphism skeuomorphism is when we
deliberately design a virtual element to
look very much like its counterpart in
reality and 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 over the
past few weeks there’s been lots of buzz
to suggest that skeuomorphism is making
a comeback and some are calling this new
brand of realism neo morphism now
personally I think it’s still too early
to say we’re barely through January but
I’m very excited to see where these
adventurous designers take this idea now
notice by the way that the shape of the
buttons that we’re looking at are either
circular squared or rounded squares and
oblongs we’d be hard-pressed to find
buttons in complex non symmetrical
shapes an octagon or a pentagram might
look great but the chances are that few
people besides ourselves will recognize
them as a button now you may recall the
trouble that Microsoft had when they
used the office logo as a button on
their innovative ribbon most people
assume that it was there to look pretty
and had no function at all and the
button affectionately known as the pizza
button was in fact supposed to give us
access to the software’s fundamental
functions such as open and new documents
save a document settings etc 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 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 click here then this will
occur
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 now whether you’re
using text icons or both the last thing
that we want to do is cram our content
into the button surface now some suggest
leaving a border of about 25 pixels
surrounding the buttons label but I find
that a great rule of thumb is to leave a
clear space around the content of the
button at the height and width of a
character or icon that we are using as
for the size of an icon that we place
alongside the text again keeping the
icon the same size as the text or a
little larger is probably the best way
to go as for the size of the button
itself
I suppose the toughest decisions are for
mobile screens and this is true
especially if your design process or
workflow is mobile first and once we
figured out the size of our button for
responsive view we can always scale it
up for our desktop views and there are
of course recommendations from the
industry giants Apple suggests that for
mobile designs the main buttons or
call-to-action buttons should be at
least 44 by 44 pixels on the other hand
microsoft recommends using slightly
smaller buttons of 34 by 26 pixels the
position of a button is also very
important now traditional and standard
design places the buttons within the
errors that are easy for us to scan with
our eyes the main blocks of content
along the margins or the corners of the
screen remember that we need to make the
user interaction enjoyable and a lot of
that boils down to the ease of
navigation that needs to be simple and
intuitive the users eyes should follow
the path that we’ve laid out in our
design without getting distracted
we should also establish a visual
hierarchy for the user to understand
what parts are more important and skip
over the rest if our buttons action
takes the user to another page if we
have say a PayPal button that sends us
to a PayPal login page we
want to consider whether or not we want
this to open 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 can determine this
with all of our buttons in Elementor by
going to the buttons content settings
and next to the link box we’ll click on
the settings or cog icon that will bring
up the options to open the link in a new
window or add a nofollow to this action
now we can all agree that not all
buttons should be so obvious that they
dominate the focus of a page and this
brings us to another aspect that we
should consider whenever we design
buttons the buttons purpose and its
importance now if we’re designing a
landing page for example our page will
be constructed so to draw the users to a
focal point and there will 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
like a main attraction on the stage to
entice the curious and interested user
to interact with it
a great style of button that designers
often employ for this purpose is the
floating action button or FA B these are
buttons that are defined by Google as
buttons that are intended to perform the
primary or the most common actions on
the screen this could be an action on
the current screen or an action taking
us to a whole new screen now typically
they appear as a circular shape floating
with an icon at its center above all of
the content on the page over one of the
sides or in one of the corners of the
screen there are three types of FA be
the regular mini and extended which
provides an additional selection of
popular options on the app now these are
very common in responsive design as they
convey the purpose instantly and are
very easy to see and tap on a mobile
screen
the sooner the user recognizes in
elements as a button
the sooner they understand how to
navigate the page and interact with it
and the lack of clarity in this sense
will leave an impatient user frustrated
enough just to leave the page altogether
a popular and simple graphic trick that
we can employ to avoid this is by adding
animation or hover effects changing the
color the font or the text perhaps
hovering in some cases will trigger the
button to shake or jiggle these help to
highlight the fact that there is
something different about this element
inviting the curious users to click on
it and find out what happens when they
do
but what if for example we’re designing
an about page or a blog page where our
goal will be exactly the opposite we’ll
want to keep users on the page to take
in the content so in cases such as these
a big flashy button drawing all the
attention and focus is the last thing
that we want instead we’ll use buttons
with a subtle design so that they don’t
stand out against the background too
much because they are of secondary
importance a style of button that we
could use to achieve this would of
course be the ghost button these are
basically text buttons with little or no
background and an outline surrounding it
they are elegantly subtle and as such
they tell the user that they’re not the
primary activity of the page these are
buttons that we use when we want the
users to be aware of them in the back of
their mind throughout their experience
of the page there could be buttons to
take the user back to the top of the
page for example in elements or we can
very easily make all of these buttons
sticky buttons that follow the user down
the page as they browse through the
content and this way they’ll always be
right there on the screen ready to be
used like a chatbot button buttons can
cater to many types of purpose all of
which could be classified into two
groups service that includes help
buttons login buttons chat bot buttons
even cookie notifications and in some
cases download buttons and
we have the sales category where we’ll
find social share buttons subscription
buttons buy ads a card etc and just
hearing those titles we can already get
an idea of the level of importance
associated with each one and it’s this
way of thinking that we need to utilize
when we sit down to design pages and the
buttons that we’ll be including and if
we’re already speaking of buttons in
plural how many buttons should we use
per page
well most professionals try to limit the
number of attention hogging buttons to
one but no more than two per page of
course you can always add several more
buttons of a subtle design as needed but
you don’t want to have too many as this
tends to confuse and overwhelm some
users also remember that we’re designing
web pages and we don’t want them to look
like the control panels of a passenger
jet airliner or the sound console of a
big-name recording studio if you
absolutely need to use a large amount of
buttons if let’s say we need to make a
registration or order form with many
binary queries or yes/no questions we
can use a toggle or switch button these
are very straightforward and easy to use
an equally easy to add an elemental so
yes the design of the button is as
important as its functionality equally
important if not more so is how the
design of our button has to complement
and correspond with the overall design
of the page yes every element that we
place on our pages should remain
consistent and loyal to our design theme
and ideas 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
Elemental the plus is a treasure trove
where we can find all the types of
buttons that we just discussed 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
we install the plus plugin through the
wordpress dashboard the same as we would
any other plugin once we’ve installed it
will activate it then when we open a
page to edit with Elementor and we go to
the widget library in the left-hand
panel we’ll find a series of drop-down
lists of all 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
so this week we reviewed the buttons
beginning with the basic understanding
of 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 more importantly
we went through a lot of great rules of
thumb do’s and don’ts and told you about
the plus a fantastic resource for button
designs that work perfectly with
anything that we create with elemental
in fact this masterclass we’ve gone over
everything that we could possibly need
to create the kind of buttons that the
late Steve Jobs would refer to as
buttons that look so good you’ll want to
lick’em 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 and if you’d like to share
examples of buttons that you’ve designed
or that have inspired you this is the
place and if you have any criticism we
are equally interested in your thoughts
and if you’ve enjoyed this masterclass
and you found it helpful or inspiring
make sure that you click on the
subscribe button and tap that bell so
that you don’t miss out on our next
Monday masterclass because after all our
goal is to be the best at helping others
excel at their craft thanks for watching
