Have this hover effect and if i click on that we have this animation and the heart icon changes to red and we also have this number.
Increment and if i click on it once again it goes back to the previous state and we have the number decrement by one so this is what we're going to design in.
This video using html css and javascript so let's get started right here i have created this folder.
Called twitter like animation and i have opened it with vs code now here i have a folder called images and in that we have this image right here now the first thing you have to do.
Is create an image like this so here we can see this is a png image and in that we have all these frames of the animation so this image consists of all these frames right here.
So you need to create some type of image sequence for this type of animations now this is an image i got from the internet and i'll also give you the link of this.
Source code so you can just access this image but if you want to have a custom animation you can just go ahead and make changes in these individual images over here you can use any image editing tool.
For creating this type of images now when you create this image you have to take note of the width and the height of the image so right now the width and the height of this image is 2 900 pixels to.
100 pixels so the width is 2900 pixels and the height is 100 pixels so we have to write the css according to the height and the width of this image right now with that being said let's go.
Ahead and start with our code so the first thing we will do is we'll create an html file so let's click on new file and let's name it index.html and let's create a css file let's name it.
Style.css and we'll also create a Wesdigital
Javascript file and we'll just name it main.js right let's start with the index.html file so in vs code you have the shortcut where.You can just press exclamation and press tab and you'll have this basic html5 code right now let's link our css file over here so i'll just type link and press.
Tab and in the sr values type style.css and in the body let's link the javascript file so let's type script call an src and press tab and in the src i'll just type main.js.
Right now let's start with the markup of this design so the first thing we will do is we'll create a container division and we'll just give it a class of like button.
And in that we will have a division for the bg so here we can see we have this background shape when we hover over this heart so for that let's create a division and.
Let's give it a class of heart bg and we don't need to add anything in this division we'll just write the css for that and then let's create a division for the icon so let's create a.
Division of the class of heart icon and in that we will add the icon now we will add the icon using css so we'll create a background url and we will add the.
Icon over there now this heart icon should be inside the heart bg so let's cut this from here and let's add this inside this heart bg division.
All right now the last thing we need to have is this likes amount so let's create a division with a class of likes amount and for now let's type 7 over here all.
Right that's basically with the html now
Let's go ahead and start writing the css so we have already linked our css file over here so let's go to our css file and before that let's go ahead and.Open this in our browser so i have this extension called live server installed in vs code so once you install that you can just right click over here in the html and click on open.
With live server and here we can see that our design is displayed over here in the browser right now we can just see the likes amount right now let's go ahead.
And add the css now the first thing we will do is we'll just bring this to the center so let's type body and let's give it a height of 100 viewport height and we'll set the display to flex align.
Items to center and justify content to the center and now we can see it is exactly in the center of the screen right now let's style the heart icon so if you go back to the html here we can.
See we have this heart icon inside the like button division so let's tap like button heart icon and for the image we had set a height of.
100 pixels so let's set the height of this heart icon to 100 pixels as well and we'll also set the width to 100 pixels because each of the frames in the image has a width of 100 pixels so if.
You go back over here into the image here we can see each of these frames have 100 pixels width and height right so let's go back to our css.
And now let's add the image so let's type background and let's type url and in this we will add the link of the image so our image is inside images.
Folder and in that we have the heart.png image and here we can see that our heart image is displayed over here now the next thing we will do is we will.
Add a background position so if you just have background position and if you set it to right we can see that the last frame is.
Displayed over here so if you go back to the image here we can see this is the last frame of the image so let's go back and let's set it to left.
Because the first image we need to have is this one right here and when we click on this button we need to go from the left to the right right now let's set the cursor to pointer.
So that when we hover over this we have this pointer now the next thing we will do is we will add the hover effect so if you go back to the original design.
Here we can see when we hover over this we have this circle around the image now for that we have created this division with the class of heart bg.
So let's style that let's type like button heart bg and let's set the background color to rgba 255 192 200.
And 0.7 for the opacity and now we can see we have this background let's make it a circle so let's type border radius and let's say to 50.
And we'll also decrease the height and the width so let's type height and let's set it to 60 pixels and also the width to 60 pixels now here we can see that the icon is not.
In the center so we have to type display of flex align items to the center and justify content to the center and even for the heart icon we have to set the position.
To absolute and now we can see that it is exactly in the center now the next thing we need to do is we have to display this background when we hover over this so for that.
Here in the rgba let's set the opacity to 0 by default and let's add a hover effect for the heart bg so let's tap like button.
Heart bg colon hover and here we'll just type background and let's copy this line of code from here and i'll just change this to 0.7.
And let's also add a smooth animation so let's tap transition and let's set it to all 100 milliseconds is right now let's go back to our design.
And if you hover over this we have the background displayed right now let's style this likes amount so if we go back to our index.html file here we can see we have this division.
With the class of like button and in that we have the heart bg division and after that we have the likes amount division so we need to have both these elements.
One next to the other so for that let's set the display of this like button to flex let's go back and here just tap like button and let's see the display to flex and.
Let's set the align items to the center right now let's style this likes amount so for that we have a division of the class of likes amount so here i'll just type like button.
Likes amount and let's set the font size to 20 pixels let's set the font family to roboto and let's set the color to 888.
And we'll set the font weight to 900 and we'll also add a margin left so let's set it to 6 pixels right now the last thing we need to do.