Name: CSSとJavaScriptを使って「いいね！」ボタンを潰してみた (I Used CSS and JavaScript To Smash The Like Button)
Uploaded: 2021-01-14T10:23:09.000Z
Duration: 21 min 38 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

now, Have you been watching YouTube for any time at all?

程度の副詞

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.

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.

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.

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 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.

This next path you see is our top rate path.

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.

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

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.

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.

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

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.

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.

字幕リスト動画再生

CSSとJavaScriptを使って「いいね！」ボタンを潰してみた (I Used CSS and JavaScript To Smash The Like Button)

entire

essentially

bunch

slightly