Your home page is the quick 30 second opportunity for you to show your visitors what you’re all about. It’s where you put your Hero section so they know who you are, and it’s where you quickly describe your content so they know what you stand for.

These key content silos are important to give a quick orientation to your readers on how they should be enter into your world, so it’s important to make them very clickable. In this quick post, I’m going to show you some quick tricks to create custom buttons using Thrive Architect.

It’s time to get the click.

Video Tutorial

Before we get into actually building, let’s take a look at a few sites that show this working beautifully:

Example 1: Size magnification and drop shadow on hover

Subtle effect of drop shadow and magnification on hover (smartpassiveincome.com)

The 6 key buttons on Smart Passive Income have a nice effect that subtly remind the viewer that they are clickable.

Example 2: Hovering over the area creates depth and “lifting” the button off of the page.

This second example is one directly from IncomeMesh.com where I want to create an elevated effect to a simple icon box. Pretty cool, right?

Example 3: Invert colors and increase size on hover

Make a bold stance when hovering by increasing size and inverting colors

The video tutorial above walks through the step by step process to create this effect on any page edited with Thrive Architect!

What is your favorite effect?

How do you like to make your buttons pop out? Be sure to leave a comment and let me know!

Video Transcript

everybody John here from in kamesh calm
and on your homepage one of the key
things you need to include is kind of
your pillar core competencies the things
that you stand for and that you want
your blog to immediately resonate with
your audience and you have only a few
seconds to really do that before they
decide maybe this guy’s not really for
me and they bounce off and go someplace
else and in today’s video I want to show
you how you can make a nice little
interactive set of icons and buttons
that will clearly show you what you’re
all about to your readers and it’ll look
something like this by the time that
we’re done look kind of cool right so
sometimes when you have icons and text
you don’t know if it’s really clickable
you don’t know if it’s a button or if
it’s just kind of there to look pretty
but when you add some of this kind of
customization and some of the styling
you clearly show your visitors this is a
clickable icon it’s very nice and
centered and easy to to understand and
it’s not that hard to do so let’s go
ahead and build that together right now
what we’re gonna do is go into new and
we’re gonna add a new page and let’s
just give it a quick title call it
pretty icon buttons and I’m gonna go and
hide myself so we can have a lot of
space here for this tutorial and we’ll
launch thrive okay so we have a simple
little you know blank page right now I’m
not gonna load a template we’re gonna
just use my existing theme because I
think it’s important to show your
buttons your menu and all that as much
as possible throughout the the
experience so what we want to do here to
kind of replicate my home screen let me
just have this as our as our kind of
guiding light here we want to kind of
create this three column layout and
we’re gonna have some icons some text
and some nice little styling to it so
let’s get right to it the first thing
we’re gonna want to do is create kind of
the structure of the page which is going
to be columns so we’ll click on the
columns icon and give it a one-third
width for each one of the columns and
then if you wanted to use image icons
you could pull images in for simplicity
let’s just use the icon library here so
we’ll let’s create an icon I’m just
going to search for icon and pull it
into one of the columns and what I’m
gonna do is I’m going to build out one
call in the way that I like it and then
we’ll duplicate it and just make the
small tweaks that we need so let’s go
and just find a cool icon let’s say you
want to talk about a podcast you want to
talk about a video and you
want to talk about a blogs we’ll find
icons that kind of represent those three
areas here okay so we have our icon here
and one thing that we’re gonna want to
do pretty early on in the process is
start using some content boxes and
content boxes are kind of one of those
things when you first get started you’re
like why did they even have this element
what is this things purpose in life but
once you kind of get into it you’ll be
like oh my gosh I love content boxes
that’s kind of how I feel right now
my wife she’s sitting over here next
week she’s like what is a Content box
she it’s it’s a geeky thing but you
really start to appreciate the
flexibility of the content box enough
about content boxes let’s go and move on
and let’s take this icon and put it into
the content box all right and we’ll do
the styling in just a second let’s just
build the backbone here let’s put a
header underneath this and just let’s
make it like an h3 so it’s a little bit
smaller and let’s call this podcast
listen to the podcast looks pretty cool
so now what we’re going to want to do is
inside of the content box let’s start
doing some settings and these settings
will apply to everything that is inside
the box so the first thing we want to do
is just make sure that our typography is
centered that’s gonna put the podcast
centered right there we’re also going to
want to have some margin here let’s call
it padding because we want to make sure
that our button doesn’t look like
they’re all squished up on top of each
other so let’s go ahead and first give
it a background color just to make it
you know to make it clear what we’re
working inside of we’ll just give this a
nice little gray here apply that setting
and now as we kind of look at it the
reason why we want to put some padding
is this is really right up on it and if
we had more text you can really get to
where it’s all the way up on the button
that doesn’t look very good so let’s go
to our content box that are a layout in
position I’ll put this little link on
here which will make sure that all
padding is applied evenly and let’s just
start with maybe 15 pixels of padding
and now you can see that looks much
better clearly a button but as I look at
it two things I want to do on this style
is I want to give it a border a little
slightly darker gray border and I want
to round those corners
and let’s go ahead and do that together
here so we can go to borders and corners
and give it a one pixel border up here
and right now it’s black that’s a little
too stark
so we’ll kind of take that black and
move it up here and just make it a
darker gray which looks a little bit
more modern looks kind of nice and let’s
go here and round out the borders here a
little bit just make it look a little
bit more buttony and you can go nuts
with this I mean you can kind of scroll
this all the way up until it’s a big
circle which I think looks not very good
so it won’t do that let’s go back to
that nice subtle looking things like a
15 pixel button looks nice so the last
thing that might make this look a little
more buttony which I’ll just coin that
term is maybe a little bit of a drop
shadow now if you’re going for more of a
flat design of a flat aesthetic you
might not want to do this but I don’t
know I mean recently I’ve been liking
the the drop shadow so we’re gonna put
one in there and now this is looking
clearly like a button so what is the one
last thing we can really do to solidify
this as being an interactive element on
your page and that is to add things that
happen when you hover over the element
so as the way that I worded that implies
we’re gonna click on the content box one
more time and now we’re gonna change our
state and add separate settings separate
configurations to the hover state so
this is one that took me a little while
to really master so I’ll go through this
and talk through every step so when you
click on hover you now kind of it Gray’s
out the rest of the screen and it makes
you realize okay whatever you do is only
going to apply to this element when it’s
being hovered on so you’ve got a you’ve
got a more limited set of options like
you can’t change the padding and some of
those things it really wouldn’t make a
lot of sense to do during the hover
animation but what you do have are
things are very obvious so you can it
display a tooltip which I don’t like
that we won’t do that today but we will
do a CSS animation and this is so when
you hover over it you want it to grow
shrink puls
push/pop bouncing i don’t even know half
these are what does hang listen okay
that’s kind of cool
kind of play with a couple these buzz Oh
buzz yeah let’s go to buzz it’s quite
annoying but we’ll kill with it for the
demonstration
we’re gonna give it a buzz when we hover
over it and let’s also just slightly
tweak the background color and what I
like to do instead of actually changing
the color itself let’s add another layer
of colors on top of it so this will just
be kinda like adding a darker or lighter
level on top so we’ll add a white and
we’ll bring that opacity down to maybe
like 10% and so what that does let’s go
ahead and kick out of our hover state
and we’re actually going to need to
preview this to show you how that works
I forget sometimes the hover actions
don’t really work in the editor itself
so I’ll preview what we’ve done so there
you go it’s kind of slight well we’ll
make the the color change more obviously
you can see it but it’s changing color
and it’s also kind of going nuts long as
here which is kind of fun so let’s go
back into our editor let’s just go back
into our hover State one more time and
let’s change this gradient let’s
actually make it darker that’ll be more
obvious to see and let’s increase the
opacity just to make it clear that it’s
doing something and let’s get out of our
however state and somehow we actually
had an animation added when I was kind
of testing it around so now we can see
our color change and we’re good to go
one obvious thing you do want to include
which I was about to forget to tell you
is you actually want it to go someplace
you want this entire area to become a
clickable link and to do that you just
click on the animation and action add a
link and you’re going to want to do this
in the normal state and you can just
have this go to a website I’m gonna give
my wife some love so I’ll send it to her
website here and apply that and now it’s
kind of interesting is that will by
default adjust the color of your icon to
your themes colors you can override that
if you’d like which I will I’m not
really feeling the orange in this
example here so now we have a clickable
area that looks kind of nice all you
have to do now to kind of round it out
and change it is just clone and move
and clone and move now you have these
three side by side we can just make the
small adjustments that we need to well
let’s make this we said that we’re gonna
do like YouTube so I’m just gonna search
for YouTube and find like this guy the
most so listen to the podcast subscribe
to the channel and let’s find a blog
icon mmm maybe a wordpress yeah let’s do
a wordpress guy here and we’ll say read
the blog what I want to do is make this
kind of the same height so let’s say
read the latest read the latest blog
that’ll work
so now we have these nice clean little
icons they all kind of go different
places you want to make sure you change
the link to where each one of these is
going to obviously so for here for
example let me actually just send this
to my resources page I’ll copy the link
address here and send this one to that
location and then I will let’s say
University let’s say blog take the blog
URL and put that as the action for this
button here so now let’s go ahead and
save this and give it a little preview
to make sure we get the effects we
really want so it loads super quick
what’s great about this is you know
these are icons there there is super
small in size I think they’re like in
the just a few little kilobytes and now
we have these very obvious
call-to-action buttons maybe this little
buzzing is not the best animation to use
but you know these things are clickable
and then when you click on it they do
what they’re supposed to do
toolbox and go to the blog okay so I
hope this was helpful this was kind of a
fun little down and dirty I was actually
doing this just the other day and I was
like man this is really fun to do but I
was going through a few learning curves
as I was working through the entire
process and that’s one of the
double-edged swords of thrive architects
you can do anything that you want to
with it but you have to kind of think
through the strategy of how you want
everything to kind of work out to make
sure you’re not reworking and reworking
so one of the tips as you’re going
through this I would advise you to
always think from the outside in and so
for example here I could have May
the icon Center lined align Center and
make the text-align:center and if I had
maybe some subtext there align that
Center or I can click one button and
align everything that’s inside that
content box at in that one step
similarly when you’re doing your hover
animations you might want to link up the
text and link up the icon and then know
just take the box the entire box you
want to be a button so set that link
once there on the content box so just in
general of some words wisdom and how to
do that if you’ve enjoyed this and want
to kind of learn more about how to build
high converting landing pages and high
converting websites I love putting up
the stuff I love helping you guys so be
sure to subscribe to the channel and
click the bell be notified when I
release my next video I’ll see you guys
in the next one
take care

Similar Posts

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *