Hey, what’s up, everybody? Welcome back to the channel. In today’s training, I’m going to teach
you how to make a really cool animated flip button. We’re going to talk about why I’ve avoided
effects like this in the past, but why I am very hype about doing them now. So let’s start out.
I’m just going to show you what it looks like. Okay. This is what we’re going to build today.
We got a very simple looking button, but it’s got this cool effect where when I hover over it,
the label kind of like swaps to itself again. It’s just kind of like a cool little animation effect
and it’s pretty simple to build. But as you’re going to see, you don’t want to build this unless
you’re actually using a tool that facilitates building it properly. So I’m going to show you
what to look out for. And I’m also going to show you the correct process of doing this. So let’s go
ahead and get started. I’m just going to go ahead and clear my slate. Okay. We’re going to start from
scratch. I’m going to add a section. And in that section, I am going to add a link. Okay.
One, I want this to look like a button. Now I’m using automatic CSS, which means I already have
button classes available to me. And these handle all of my button styling across the entire website.
I also want these flip buttons to be very flexible. I want them to be able to have different colors.
Like if I need a primary one or a secondary one or a neutral one. And so I’m not going to do all the
button styling from scratch. There’s no point in doing that. I’m just going to use automatic CSS to
do it. So I am going to hit command enter on my keyboard. This is going to bring up etch’s quick
attribute bar. I can add a bunch of utility classes here. I can use a data attributes, ARIA labels,
whatever I want to do. And the way we’re going to get started is I’m just going to say button primary,
and I’m going to put a space because I want to put more things, but that’s going to give me my,
my button styling right off the bat. Okay. And that the point of this tutorial is not to learn button
styling. It’s to learn about the effect and the other things that go along with a, with an effect
like this. Okay. So button primary, we’re also going to call this thing a flip button. So I’m
going to give it a special class called flip button. That’s going to ensure that I can have flip buttons
when I want flip buttons. But if I don’t want to flip button, I still have just my normal button
classes. I can use those too. So I’m not required to use a flip button on this website. Now, what I want to
do is I want to, there’s going to need to be a span inside this button. We’re going to talk about the
structure of it in just a second, but there also needs to be a data attribute. That’s going to hold
the label text of the button. And so I’m going to call this data button text equals, and then we’re
going to say like call to action. Okay. And you can see, I can put all of this in, in etches data
attribute bar all at once, or I’m sorry, that the quick ad attribute bar all at once, it’s going to add
classes, attributes, whatever I want to do here. I can do it all at once. So next thing I need for
accessibility purposes, because there is a little bit of a problem. If you don’t do this, it’ll announce
the label twice. You want to set an ARIA label and the ARIA label needs to be the same text as the
button. So I’m going to say ARIA label equals, and I’m going to say call to action. Okay. And you’re
like, Kevin, you’re like, you’re duplicating labels. You got the same label printed twice.
It’s going to be three times in a minute. This seems like craziness. What’s going on here?
Exactly. That’s why I’ve avoided doing effects like this in the past, because they’re a nightmare
if you can’t use proper components. But when you can use proper components, all the problems are
instantly solved as you were going to see. So don’t let this worry you. I know you’re sweating.
You’re stressing right now. Don’t let this worry you. It is all going to get taken care of. Okay.
This is the proper way to do something like this. And if you cannot use proper components,
you should not do effects like this period point blank. Okay. Okay. So let’s keep going. So I’ve
got an ARIA label. I’ve got a call, a data attribute. I’ve got a flip button class. I’ve got a button
primary class. That’s all we need for now. Let’s just hit add and voila, we have a button. It’s got a
label. Now my label, I want the label to say call to action. And I also need the label. Right now,
the label is not really in an element that I can manipulate. Okay. It’s the text of a link,
but it really needs to be its own element. So what I’m going to do, and thankfully I have access to the
HTML, which makes this quite easy. In a lot of page builders, you can’t nest things inside of links.
Okay. But in etch, we can do whatever we want essentially. So I can take this label text right
here and I can put it in a span, right? And you’re going to see that that span is even exposed in the
structure panel in etch. This is very good because you can see exactly what’s going on. You have the
flexibility to do these kinds of things. And now what I have is a span call to action inside of my link.
And now I can actually target and manipulate that span, which is going to come in quite handy.
Now I’m going to switch over to the flip button class right here. I’m actually going to give us
way more real estate to work with as well. So I don’t have to scroll around at all.
And I’m going to start styling. And the first thing I’m going to do is I’m going to get the
data attribute text right here. I’m going to get that to show up inside the button because what we need
for this effect to work, we need two labels that say the same thing and they just swap places with
each other. It’s really not all that complicated. Okay. So I’m going to get the other label to show up.
So I’m going to say at before and I’m just using CSS nesting right here. Okay. There’s a little
ampersand. I say at don’t, don’t mind what I say. It’s and okay. Ampersand, right? Ampersand before for
the pseudo element, I’m attaching a pseudo element to my flip button. And what I can do is the content
function. And when you do the content or the content property, and when you use the content
property, you can use an attribute function to grab the value of any data attribute. So this can be data
button text. And immediately you’re going to see, I now have two labels. That is fantastic. Now I want
to position this label. Absolutely. In order to do that, I need the parent flip button to be positioned
relative to contain it. Otherwise it’s going to fly outside of the button and that’s not going to be
very useful. Right? So I’m going to come down here and I’m going to say position relative. I’m doing
this on the flip button itself, setting that to position relative. I also need to be moving these
things kind of off out of the button boundaries, right? I don’t want them to show up if they’re
outside of the button boundaries. So what I need to do is I need to hide any overflow or clip any overflow.
Okay. So I can say overflow of clip, and that’s going to ensure that when I move these labels outside the
button, we can’t see them. They just kind of disappear. Okay. So the next thing I’m going to do is I’m going to
position the pseudo element. You might think that I’m positioning text, but really, because that’s what it’s
doing. It’s pulling text from the data attribute, but really this is still a box. It’s still an object. And for me,
the alignment of, of the label and keeping it dead in the center is easier if I just treat it as a box,
the size of the button. So if I go position absolute and I go in set of zero, the box is automatically now
the exact size of my button. And now if I display it flex, I can simply use flex controls to manipulate
where the label actually shows up. Like for example, I can justify content to the center. I can align items to the
center. What I could also do instead of all that is probably go display grid and place items to the center. And it’s going to do the exact
same thing. So there’s multiple pathways to get to where you want to go when you’re doing these things, but the principles are still the same. I’m
I’m treating the pseudo element like a giant box and I’m positioning the text that is inside of the box.
So now I have the same label duplicated. They’re sitting on top of each other, right? Okay. So what I want to do now is I want to start to move
them. So I’m going to take this before. This is my label that actually should not be seen initially. Okay. So what I’m going to do is I’m going to
translate it 0% on the Y axis. I’m sorry, on the X axis, dude, my dyslexia is so frustrating. Okay. 0% on the X axis, but I want to go
out of view twice the height of the button. Okay. Like let’s just get it way out of view. 200%. Okay. 100% would be the height of the
button. 200% would be twice the height of the button. That is definitely clearing the boundaries of the button. So I’m just
translating that thing away 200%. Okay. Now you can’t see it because it’s replaced by the other label that was already
there and we’re hiding the overflow, but I guarantee you we have moved it outside of the bounds of the
button. Now what I want to do is I want to come down and I want to, I want to manipulate this span. And I’m
going to say that this is actually a display block. And I’m going to say that the, I do want to put a transition
on here. Okay. And we’re going to, we’re going to transition the translate that we’ve been using because that’s what’s moving our
label. And so if we, if we transition that, it’s going to move smoothly. Right. So I want to translate 0.3 seconds ease and I want to do this on my
and I want to do this on my before pseudo element as well. Okay. And, um, I think that’s all we need to do for right now. We need to start managing our hover states now. Okay. So I’m going to come down. We’re going to do and hover. And if I and hover, okay, what should happen? Well, um, the span that’s currently sitting there that we’re looking at should definitely translate somewhere. Okay. It’s going to go 0% on the x axis.
It’s going to go minus 200% on the y axis, which would be up, right? Plus 200% is down minus 200% is up. The other one is already down. I want this one to go up and I want the other one to come up in its place. And then they’ll reverse when I let go of the hover. Okay. So that is a span translate 0 minus. We can see, look at that. It flies out. The problem is the other one doesn’t fly in. Okay. So inside of this
this hover, what we can also do is say, and before, so go get that pseudo element again and say, translate this to 0%, 0%. Remember it’s already translated 200% out of the way. We just need to translate it back to zero. Okay. And look what happens. If we do that, we get this really cool swap effect. Okay. What I call like a flip button on hover. And it’s just nice. It’s just perfect. It just works. Now, the problem is
you would never want to do this. You would never want to do this. If you can’t do proper component building. Okay. If you’re not in an environment that allows the use of proper components, you would never, ever, ever, ever, ever want to do this. You want to know why?
Because if I duplicate this button. Okay. And I come down here and I’m like, okay. Well, first of all, I have, I have access to all the HTML. So it’s a little bit easier. I could literally do multi cursor editing. Like I could say new label and I’ve edited all of those at the exact same time. That’s the beauty of having like a proper code editor in the environment that you’re working in. But that’s not going to be a thing in most page builders, right? In most page builders, you would have to use whatever UI they give you.
to change the data attribute to change. Okay. New label. And then the ARIA label has to change. And then you have to do the span, which you wouldn’t even really have access to. Okay. We got to click here. Content new label. Okay.
So, and every button you deploy, you’re going to have to make three changes for the content in different parts of the UI and not just do that, but remember to do that. And by the way, if somebody behind you comes along and they don’t realize how you built the button and they’re trying to change the label, you are at risk of them changing one or two of the locations, but the other one not getting changed.
For example, if they change the actual span label, which is the obvious one, but they forget to change the data attribute label, then it’s going to, when it flips, it’s going to rotate in the wrong text.
And then even if they get that text, right, but they forget the ARIA label, it’s going to rotate in the proper text, but it’s going to announce on screen readers the wrong label.
So all three have to change or it’s not going to work.
It’s going to break.
Right.
And now you’re in a situation where not only do you have to change all three manually and know that you have to change all three, but you now are going to deploy all of these instances of these buttons where what happens if you made a mistake in the structure and you realize you have to fix it.
You don’t have a universal control over the structure of all of those buttons or all of those instances.
It’s an absolute nightmare.
You, I would never, I’ve avoided these.
I’ve avoided these for so long because I was working in environments that didn’t allow this level of control.
But now we have an environment that allows this level of control and it’s not a problem at all.
So watch what we’re going to do.
Okay.
So I’ve got this, I’ve got my flip button, I’ve got my button primary.
And by the way, I also want the flexibility to control what style of button we’re actually using.
Right.
Like if I don’t want primary and I want neutral, how are we going to manage that?
We have to have that level of control as well.
Let’s see how components fix all of this.
Okay.
So I’m going to take this link right here and I’m going to call it a flip button and we’ve got our span in here and I’ll just call this label.
Okay.
And I’m just going to right click and say, create component.
We’re going to create this thing called a flip button.
And the first thing that we’re going to do is we’re going to start creating properties for the important aspects of this button.
One of the important aspects of the button is a text attribute.
Okay.
A text property.
And this is obvious.
It’s the label of the button.
Okay.
So in this sense, it is call to action.
Right.
We need to create another property.
What’s another important aspect of this button?
Probably the URL or the link.
Okay.
The destination.
Where does the button take people?
So I’m going to say here, and I’m just going to say link.
And then this is going to be my HTTPS, blah, blah, blah, blah, blah.
And I’ll just put a pound sign as the default.
We’re not going to go anywhere.
You just pound sign.
It’s called it a day.
Okay.
Another important aspect.
I’m going to do another text property.
And I’m going to say, this is the styles.
Okay.
Like button primary, button neutral, button whatever.
And I’m going to say, you know what?
Button primary is going to be the default value.
This allows me to set a default, default, default.
Right.
Okay.
So now what I’m going to do is I’m going to go to my flip button right here.
And I am going to take this label key.
Okay.
Which is props dot label.
And I’m going to put it everywhere the label is supposed to go.
So see call to action right here.
I can just replace that with props dot label.
And it’s going to replace it right here.
Now, if I want to preview that, I can preview it.
Right.
Okay.
And I can turn on preview for all of these if I want to, by the way.
So I’ve just put props dot label inside the span, which is going to render our label.
Look at this right here.
Here’s another instance of it.
And I’ll just hit command D and I’ll copy the other one as well and hit paste.
And now props dot label is a token that is going to dynamically fill the data for all three
of these places.
That means that when people change the button text, they can’t break it.
It is an unbreakable button.
They change it in one place.
It updates in all three places at once.
That’s fantastic.
Right.
Okay.
Now we’re going to do props dot link.
Where do I put that?
Right here in the Ahrefs.
Now I could also put it over here.
Okay.
Like I’ll just show you if I did props dot link, I can do it here in the sidebar as well.
Right.
And we’re very soon going to have little icons.
Just click the icon, choose your token and move on with your life.
You don’t have to write props dot whatever.
You don’t have to do that manually.
Okay.
We’re almost there.
It’s very close.
We’re worried about functionality more than just the UX UI right now.
We just want it working.
Right.
And it’s working fantastically.
So I’ve got props dot link is filling my link.
Props dot labels filling all of my label positions.
And now I want to get rid of button primary.
And I want to replace button primary with props dot styles.
And this is going to dynamically inject whatever styles I have in here.
And then the class flip button, which does all the magic of doing the flip buttoning stuff.
That’s going to stay on there and kind of be untouchable.
Right.
Right.
Okay.
So I’ve done all the important aspects of this button.
Let’s go ahead and hit save.
And now you’re going to see we have this thing called a flip button that I can now add to
a page.
Let me save this.
And I’m going to show you like, okay, let’s say I’m creating a new page and I want to add
one of my flip buttons.
What does the flow look like?
Okay.
I hit plus.
I go, I want to flip button.
There it is.
And look, it does its thing.
And now over here in the side, what do you want the label to be?
I’ll say buy now.
And I want the thing to go to pricing.
Okay.
So that’s where the URL is going to take me.
And it’s primary button by default.
But what if I want it to be a outline button?
I could do button primary button outline.
Okay.
And now it’s an outline variant and it still has the flip effect.
What if I want neutral instead of, and I don’t want button outline, I get neutral and it still
has the flip effect.
Right.
So I’m able to control the styles of the button.
I’m able to dynamically control the link.
And by the way, I can have like a gazillion instances of this where they’re all unique,
a unique button right here.
And I could say this one’s going to be primary.
Okay.
And then this one can be another, another button.
Right.
And then this one can be button S to make a small button or button L to make a big button.
So I want a big one right here.
Look at that.
So using the power of automatic CSS and its utility classes, I’ve created one kind of concept
that still automatically has lots and lots of different variations.
Okay.
I can do a last button, even though it’s not the last one.
Okay.
And I could say button neutral, button outline, button S.
Okay.
And it’s got all these different styles applied to it by simple utility classes.
And I don’t have to worry now about how I’m going to do this with a UI or like what, what?
No, no, no, no.
You could just do whatever you want.
Now you could just do whatever you want.
Now the proper functionality is all there.
It’s all thought through for you.
So this stuff that I used to avoid, like the plague is now easy to do.
Easy money to do this kind of stuff in an environment like this.
Okay.
So now I’ve looked at, I’ve got all these button variations.
I have global control.
So let’s say I’m in that situation where, oh man, I made some sort of mistake with the
structure.
Right.
How do I go edit that?
Well, just right click edit component.
Now I’m editing everything.
Okay.
I have access to everything.
And let’s say I wanted to add another data attribute data, another one equals test.
Right.
And what I’m going to do is I’m going to hit save and I’m going to hit save here.
Okay.
Now we added that on the second to last button.
That’s what we did.
Technically speaking, we added that on the second to last button.
I’m going to go to the front end and I’m going to refresh that was on this one, but
I’m going to right click this one.
And I’m going to see if that data attribute is there.
Do I really have global control over all of them?
Look, data, another one test, data, another one test, data, they all have it.
Why do they all have it?
Because I have global control over all instances of these buttons because of the fact that it
is a proper component.
Okay.
So this is the best of all worlds, maximum flexibility.
It opens the door to doing things that you should have never done before in environments
that don’t allow proper components.
And, and, and it’s easy.
It’s so easy.
Right?
Okay.
We have way more magic to show you on the way, but what you need to do is hit a like on this
video.
If you liked it, drop a comment down below.
And I will certainly, certainly be back with more magic.
Okay.
So you guys stay tuned.
I’ll see you again very soon.
