Divi WordPress Theme How To Create Custom Animated Buttons

Divi WordPress Theme How To Create Custom Animated Buttons

September 19, 2019 6 By Bernardo Ryan


hi guys and welcome to another Divi
WordPress theme tutorial this is jamie from https://www.system22.net and https://web-design-and-tech-tips.com/ well we’ve got a little experimental site here that we demoing
on what we’re gonna do in this video let’s create some custom call-to-action
buttons or custom but if you will we’re not going to use their button modules
let’s make our own and see if we can’t get something interesting going
Divis absolutely awesome just keeps getting better and better if you’re
building any sort of WordPress site at all I would recommend you take a take a
look at it you can check it out and demo below this video here so let’s get started I’ve got Debbie
installed here we’re logged in I’m gonna enable the visual builder
you now we’ve got that going let’s add a
section we’re going to hit this little blue button add a new section left click
going to make it a regular section and what I want it I kind of want a button
fair sized in the middle here so I’m going to choose
three columns here and we’re just gonna use the middle
button obviously you do how you want to do it and inside this middle one here I’m going to add a text module just a
regular text module I’ll just scroll down left click on the
text mode there we go okay
don’t need any of that we want to put in what we want it to say in our butt
so let’s say special deals I don’t know and something like reach out you let’s make this were heading for
we’ll see you make yours how you want to I’m just gonna demo this the best as I
can and we’ll make this one heading 3 okay so that looks really exciting
doesn’t it just a little text module there
so let’s go and start making it a little more interesting
so we’re still on our content tab this thing I’m going to do I’m going to go to
background and we’ll give it a background color or background gradient
or background image probably not reuse a video let’s give it a gradient Hey
like colors a little more interesting I have a dark blue on the top perhaps and
bit lighter blue on the bottom let’s flip it round and have it
horizontal the gradient orientation here 180 is top to bottom with 90 degrees so
it’ll go left to right there we go I think that that lose a little too in keeping with our
rest of the things we got here of course you can paste in whatever colors you
want here also maybe well let’s do something like that okay so we’ve got a background color for
it I don’t really see that text so let’s fix that next
let’s go to our design tab left click on it remember I made one of those form 1 3
I can’t remember which is which so we’ll go to heading 4
let’s make it white so it stands out that was that top one make it bold as well let’s make it ultra bowl special deal anything else we want to do here we
could well take size-wise I think that’s okay don’t really want any box-shadow on
it I don’t think I need it try it not gonna make that much difference well it
kind of stands out a little bit so I’m fairly happy with that now we could transform it so it’s
capitals yeah that stands out pretty well let’s
do the one below that which was heading three I believe and we’ll also make that
white or we can make yellow whatever color stands out for you that looks a
bit weird to me so let’s put it Y again again do I want it that’s file make it slightly bolder
you Semmy bowl yeah that stands out nicely
okay well that’s working but probably one
it’s center-aligned and want to give it a bit of breathing room so let’s do that next think we can go down to here
center-aligned there and the same for number four
heading for top that’s great now we want to give him a bit of space let’s go to design again
style who closed that heading one now we want to go down to close the heading and go down to space and goodies panning don’t need a margin
because I’ll push the whole thing up and down left and right wherever let’s say
let’s click that so they’re both the same
let’s give it I don’t know 25 top and bottom
yeah give us a bit more space we’re okay left and right but I’ll give
it padding left and right anyways because it may change on smaller devices
again let’s click the link so I just have to put it in once yeah that’s fine you didn’t see any
actual change their special deal stands out try a little bit of box shadow on an
h3 there let’s go back to our text or heading text it’s may not work let’s just try it yeah
that’s fine let’s do that okay so we’ve got a gradient background going on there
our text is standing out nicely let’s perhaps give this some rounded
corners which close up this module one more time
go down to border and to make it really rounder you can
just do a few if you just want slightly rounded corner you did you see that’s
gone slight your end I want but yeah it’s not too bad but I want something a
little more bold than that sir to get fifty pics and that should make it for a
very rounded there we go that’s what I’m looking for
that’s good we’ve got our initial sort of button here but it doesn’t actually
do anything but we’ll deal with that in a moment now
did he brought in some great features some hover features that you can make
things do things on hover so if we go down a box shadow here
let’s select this you know what here now it’s brought that around there now if
you go up – the actual box-shadow horizontal
position very busy you’ll see these little arrows appear if you click on
those it’ll give you the option to have a different one when it hovers
so on the default at the moment it’s ten set that to zero
so I really don’t want anything on the default so I will set that one to zero
and as you can see it’s not there and when it hovers I want something that
so it comes all the way across so I hit click on the hover tab there and let’s
hole up see you see it building as I’m doing this hey well we want it further
than 80 that’s probably one to is probably almost around 300 pixels that
is try 300 almost there if you wanted to you could
leave a little ditty there if you wanted to but I’m gonna have it all the way so
let’s add say perhaps another 20 yeah that’s fine
so if we look on the default there’s no shadow on the hover there’s a full
shadow let’s actually make that color stand out
a bit better my water make that special deal slightly bigger than it
so we’ve got our box shadow let’s go down to the color
or purple let’s make it purple has well that’s pretty hot catchy isn’t it
yeah you always put a custom coloring what about something like that something
that’s gonna stand out from the original for sure that’s fine if you want it to
mix with the color just bring the opacity down a little bit we want it to
stand out I’m gonna take the opacity back to zero and let’s scroll back up that’s the
hover state that’s the regular state yeah so that stands out pretty well
fairly pleased with that you
think like I said I want to make that special which is the heading for a bit
bigger so you can when I cover over it you’ve
got these little paintbrush icon things you can just click on it if you want to
and it’ll take you straight to to their age 4 which is kind of handy now here’s
the text size it’s 18 if we make it 24 yeah a bit better isn’t it
I’m happy with that okay so we’ve got our button but it
doesn’t do anything it’s just a pretty little round button there not pretty if you don’t like it and as I
say use your own style just copy what I’m doing here so we want it to actually
do something let’s go back to the content tab and you can click on a link
here now you can either link it to an external URL just paste URL another page
or wherever you want to go so I’m just gonna say that before I put in there cuz
I’m not sure where I wanted to go yet I think I might like you to go down here
we got some sale items let’s have it to go down here and have it go down here
we’ve got to give this section a CSS ID because it has no URL it’s the same URL
as the rest of the page so let’s keep click on that sections little cog get in
there school with the Advanced tab CSS ID and
class it now we want to give it an ID not a class an ID whatever you want I
guess we call it specials as that’s what we’ve called the button there so it’s
now got an ID of specials just say that go back up to our button here
now click on our little edit cook now forgive the content screw down – link
now it’s an ID to get to a to a CSS ID you want to use a hashtag hashtag and
the name of the ID with specials SP ec ILS once open in the same window because
it’s on the same page so that’s pretty irrelevant that part right there okay so
now that should be an active link that will take us down to those little sale
items there anything else we want to do let’s give
it a little animation on load we go back to the design tab animation
what about if we have it flip yeah why not just once
duration bring the duration up just about 1,500 something like that 60 I
need to spend a lot of time on it right well I think we’re there so let’s
save that let’s save our changes a little purple button Bay on the bottom
here click on it over the right and save our change if you forget to do that and
you’ve got an exit the visual builder it will prompt you to save your changes
which is good because I forget stuff all the time
so let’s exit the visual builder and see what we’ve got scroll down it’s working which does reload that you yeah there’s that little spin effect and
when we hover over it we’ve got that little
purple deal going on there make it stand out
now hopefully when we click on it it should take you straight down to those
see you liked it there we are taking this straight there to check that out
one more time and that it’s pretty eye-catching
you can do anything you want because we’re making your you’re making your own
there and like I say don’t you just use what I’ve got here make make your own
deal up if you want to do we could go a lot further
I’m not going to today I’ll finish this video you can use custom CSS to make it
do all kind of different things if you wanted to like we’ve done in previous
videos so there you have it there is how to make custom buttons or a
custom button idea for your Divi WordPress theme I hope you’ve enjoyed
that and found it useful if you have please like share and subscribe to our
youtube channel like I said you can try out diplomatic below this video it
really is awesome if you’re building WordPress sites do check it out if
you’re interested in web development we’ve got a bunch of courses below
there’s some great free courses as well as some premium courses and we’ve got
some huge discounts for our YouTube subscribers so do take a look once again
this has been Janie from system 22 and web design in tech tips com
thanks for watching have a great day