Then you most certainly been told to fashion like but the native algorithm.

But no matter how many times you click it or how hard you click it, all it does is turn blue.

So in this video, I'm gonna show you how to create a like button using SPG and CSS, which you can actually smash and destroy.

Let's get started now, But before we get started, I want to give you an entire year of hosting for free by using today's video sponsor atlantic dot net.

And that's right atlantic dot net hosting is giving you an entire year of hosting for free.

And if you use the code, Kyle, when you sign up, you get in additional $50 of credit, which you can use on top of the free year of hosting.

And this isn't some weak little server.

They're actually giving you an incredibly powerful server.

It's more powerful than the server that my own site runs on, and it's all for free for an entire year.

So I highly recommend you check out atlantic dot net hosting and use the code.

Kyle when you sign up.

Welcome back, Toe Web.

Deva simplified My name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.

So if that sounds interesting, make sure you subscribe to the channel for more videos just like this.

On the right hand side here I have the finished version of our product so we can see what we're trying to emulate before we actually build it.

We just have a simple like button, and as you click it more and more you can see it will start to get cracked.

It'll kind of grow when you click on it to really emphasize you're clicking on it.

And once you click it enough times, it's going to break apart into a bunch of little pieces, and we're able to do all of this with just spg CSS and a very little bit of JavaScript just to add in the explosion.

So, in order to get this fancy looking like button, we use Sigma to create it.

So here I just have the finished version of our like wooden, and as you can see, it's broken in all of these different pieces so we can actually individually modify all of these different groups as we want me just undo this bag.

To have it was And in order to get this into our project, if we just click on this right click, we can copy and paste this as an SPG and I'll put a link to this spg for you So you can actually download this and do this along with me.

So just check down in the comments for a link to the SPG and then if we come in here and open up index dot html, just get the boilerplate html instead of our body, we can actually paste this SPG.

And as you can see, this is just a bunch of different text.

Essentially, it's just looks a lot like HTML and it's SPG.

Itjust defines the shape, So if we actually open this up with live server, make sure everything saved.

You can see we get this exact same design as we had over here.

But now it's inside of our HTML over here, and we can actually play around with this and actually move it around and modify our SPG using CSS.

But in order to do that, we first need to figure out what all of these different paths correspond with because I mean reading this, I have no idea what end 25 8337 is.

So in order to do that easily, if we just come in here and inspect our element.

And I just dragged this over so we can easily sue or working with here.

And we just hover over different part of our SPG.

For example, this first path you can see that this first path in our SPG corresponds to this black rectangle on the left.

As you can see, it's highlighted in blue.

So we know that this first path right here is going to be our very first section or very first group, and to create a group in SPG, you just use this G like this and then everything inside of this SPG we can actually correspond by selecting this single group.

So if we move this group, it moves everything inside of it.

So we can just give this a class here which is going to be, for example, group cuff and for this simple example, since there's only one thing in the group.

We don't have to group this, but I'm going to group all of the rest of our sections because there's multiple paths in them.

So for consistency will also group this one.

Now let's see where the rest of our sections are will hover over this very next path which, you can see, is this bottom right outline, as we can see here.

And the very next path after that is the crack to left and then the crack to the top.

And then this crack here.

So we know that everything up to this next big path section is all going to be our bottom right hand group.

So all of this code here is all going to be in one group.

So it's create our group.

We'll just move that down like that.

So now we have this section which is our bottom right inside of another group.

We'll give this a class of group bottom hopes bottom great, just like that.

And now we can create another group based on our next section.

Salts open our SPG up.

This next path you see is our top rate path.

After that is one of the cracks for it.

And then this next small path is another crack Ford.

So again, these next three paths are all gonna be in our class here, which is a group top.

Right?

Close that off.

And we just put this closing tag for a group down here.

And now let's go back to our SPG.

So now we have our three groups here.

Let's see what this next section is.

We can see it looks like it's our top.

We also have this crack for that top section, and that's the only crack for the top section.

So just these next two paths are going to be our top section.

So put it in a G here with a class of group top.

Close that off and we'll just move this down here and there we go.

Now, we have just this final path section left, which is going to be this left side crack over here.

We know that this is all that's left, so we can just assume this is going to be our left side.

So we're again going to wrap this inside of a group, move this around, put the G at the bottom there, and We want this here to be a class which is going to be group, and this will just be our left group.

And now, in order to actually see how this is working and understand how everything's going, let's add in the style sheet and start applying styles to these different groups to really see what we're working with so we can just come in here.

If we want to add a link for a style sheet, we just call it styles that CSS and let's actually create that styles that CSS and inside here we can select are different groups.

We have our group top, and we also have a group which is going to be our top great, another group which is going to be for the cuff and another group, which is going to be the bottom right, and then lastly, we're going to have our group, which is on the left.

So in order to understand how this works, I was just coming here and add a display of none.

Toe are different groups you can see that's made our top group disappear.

If we apply this toward top right, you can see our top right group has disappeared.

We do it.

Our cuff are cuffed, disappears Same thing with bottom, right?

Save that Our bottom right disappears and we do it again last night with our group on the left and are left group disappears.

So by using these different classes, we can target each individual group.

So that way, when that thing explodes, we can move each group independently from each other, which is exactly what we want.

Obviously, for now, we don't want to hide them social.

Get rid of that code.

And the thing that I want to work on first is going to be centering are like button in the middle of the screen.

That's actually pretty easy to do.

If we select the body, we can use a display here of flex.

We can justify our content in the centre, align our items in the center and then all we need to do is set a min height on our body of 100 view height.

If we save, you can see that centered it.

But we have this scroll bar.

We could just remove the margin on our body.

And now you can see we have no more scroll bars and are like button is dead center in our screen.

Next, let's actually select are like button.

We use a class of white button to do that.

So in order to actually select are like button, which is this whole SPG.

We just want to add a class which is going to be, like button on to R S v G.

And now we can actually select that here.

And the first thing I want to do is change our cursor to be the pointer cursor.

So when we hover, we'll get that click looking cursor that will we know we can click this like button.

And I also want to change one thing which is overflow.

I want to change this to be showing So we're just gonna say it visible.

And the reason for this is by default, and SPG has a certain size.

If we just inspect this again, it should be pretty easy for me to demonstrate this.

And if I just use this little selector tool, you can see that we have a specific rectangle around our SPG.

And when we explode our SPG components, all of the different top right left bottom groups they're gonna leave this SPG rectangle, this blue rectangle, and we want to make them showing because by default, anything outside of this rectangle is going to be hidden.

So in order to make it show, we need to use that overflow, which we specified here of visible.

Lastly, if you remember right when we clicked on the button, we wanted to quickly grow and then shrink.

So in order to do that animation, we're going to put a transform on our like, Clayton, which has a transition, and this transition is going to be for 50 milliseconds, and we're just Dewey's in and out, and we only want to transform our transition to transform property.

So essentially, whenever we change transform, it's gonna have a 50 millisecond transition between the two different states, which is gonna give us a really quick animation, which is gonna look pretty good.

And in order to make our button grow to a size and then shrink back down, we want to select our like button and we want to do this whenever we apply the class of big we want to mend, change are transformed and we want to change this scale.

I'm just going to scale it to about 20% larger.

So we use 1.2.

And now, if we ever apply the class of big to this like button, you can see it's gonna grow to that big size.

Nor move it.

It's going to shrink back down, toe a normal size.

And in order to dictate this size of big versus small, we're actually going to use JavaScript to do that.

So let's link in here a Java script tag.

We're just gonna use script dot Js and make sure that we defer this soda load after our SPG content.

And then what's created that script file script dot Js and inside of here, let's just create a variable, which is going to be far like button.

We're gonna select this like button by using document dot query selector.

We just want to select for the class of like button just like that, and then we can actually set up an event listener So we'll say at event listener.

So whenever we click on this link button, we want to run this function in here, and in this function, we're just going to add the class of big so we'll say like button dot class list dot ad and we'll put in here the string of big.

So now when we click on this button, you can see it animated toe a larger size, which is that big size.

But you can see it's stained this big size.

We wanted to kind of pulse big and then shrink back down.

So in order to do that, we can actually use another event listener.

So we'll just do another ad event.

Listener tore button.

And there's a property here called Transition and just one word.

No capitals.

All lower case.

And what this is going to do is this is going to fire whenever an animation on our object is done being performed.

So we have that transition in our style sheet of 50 milliseconds.

So this is going to fire essentially 50 milliseconds after we click the button.

And in here, what we can do is we can take our like button our class list.

We just want to remove the big class, and this is going to do is gonna make it animate down to a smaller size.

Now, if I click on this, you can see it grows up, and then 50 milliseconds later, it shrinks back down to that size that it was before.

And I can do this as many times as I want And you could see no matter how fast or slow I click, it's always going to work.

Now, if you remember when I showed you the final version of this, it started out with no cracks.

And as we clicked it, we added more and more cracks.

So we need to do instead of our index dot html, we need to find each one of our cracks, which are these smaller looking pads.

We're gonna add a class here of crack to denote that these are the cracks inside of R S V g.

So for each one of these small paths, which just make sure we add that class of crack, I'm gonna scroll down to every single one of these.

There we go.

Now we have this class of crack on every single one of those smaller sections of our SPG, and in order to make sure that these don't show up instead of our style sheet was just select crack and we just change the display here to none.

And if I save, you can see all of the cracks have been removed from our like button.

And in order to slowly add those cracks back in, we can actually track the number of clicks inside of our JavaScript.

So it's a creative variable called number of clicks.

We're gonna default this to zero, and then inside of here we're going to increment this buy one, so it's a number of clicks plus plus, this will add one to our number of clicks.

Then what we can do is we can actually do some if statements here, for example, we're gonna increment every three clicks.

So at the very last section, when we have 12 or more clicks, what we're gonna do is want to explode our element.