Have this button over here and it looks like it is extruded from this background over here and if i hold over this button we can see we have a different hover effect now if you want to learn how to.
Design this from scratch using html and css i have already created a video on that you can go ahead and watch it i will leave the link in the description of this video and i will also leave the.
Link of the source code in the description now in this video we're just going to add this new morphic button to our blogger website so let's get started .
right here i'm in the dashboard of my blogger website and if i go over here and click on view blog this is our website looks right now so.
Let's go ahead and create a new post so here i'll just click on new post and i just add a title over here and the next thing you have to do is go to this button and click on html view so.
Source code and here's the html of our design so let's copy this html from here i'll just copy everything inside the body and let's go back and paste it over here.
Right now the html has been copied and here we can see we also have this font awesome icon over here and then we have this text over here you can go ahead and change this text to whatever you want.
And you can also change the icon over here and if you want to remove this icon over here then you can go ahead and just delete this i tag from here right now let's go ahead and add the css.
So i'll just make some space over here and i'll just create a style tag and i'll just close it over here now here in the style tag we will paste the css so let's go back to our source.
Code and let's go to the style.css file and i'll just copy all the css from this line of code to the end and let's paste it inside our style tag.
All right now the next thing you have to Wesdigital
Do is you have to add a container division so if you go back to our new morphic button here you can see we have this button and we have a background.Color for this numeric button and if i right click over here and if i go to inspect here we can see for the new morphic button we have this background color of.
E6 e6 e6 and if i select the body we can see for the body also we have the background color of e6 e6 e6 so when you are working with neomorphic buttons you have to make sure that the.
Background of the button is the same as the background around the button so right now we have just copied the button over here so here we can see we have this button over here but we have to.
Create a container division so let's create a division over here and i will give the class of buttons container and i'll just close this division over.
Here after this button all right now the next thing we need to do is we need to style this buttons container so here i'll just add some css for that.
And just type dot buttons container and we have to add a background color over here so i'll just tap background and here we can see for the button we.
Have a background color of e6 e6 e6 so we have to add the same color over here and we also add some height so i'll just type height and let's set it to 240.
Pixels and you can go ahead and change this to whatever you need i'll just set the width to 100 and i'll also bring everything to the.
Center so i just tap display of flex
And align items to the center and justify content to the center right now let's go ahead and click on publish and confirm.And let's see how it looks so let's click on view and here we can see we have the new morph button so if i hover over this we have the hover effect so everything is.
Working all right now you can go ahead and change this background color to a different color but you also have to change the background color of this button now the last thing we need to do.
Over here is to add the icon so right now the icon is not being displayed over here so let's go back and let's click on this post and here i'll just add the link of font.
Awesome so i'll just make some space over here and let's go to our source code and i'll just copy this link tag from here so this is the link for the font awesome.
Cdn so i'll just copy this from here and let's paste it over here and let's click on update and let's go back to our post and let's.
Refresh this page and now you can see we have the icon and everything is working all right now if you want to add more buttons over here you can just go ahead and copy and paste.
The same code so here we can see we have this button code if i just copy this button and paste it down here and i'll just change this to let's say.
Second button and let's click on update and if you go over here and refresh this page we can see now we have two buttons over here and you can go ahead and add.
Some space between these buttons and in this way you can go ahead and add any number of new morphic buttons to your blogger website alright so that's basically it for this video if you have.
Any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a.