Can see we have this effect right here so this is what we're going to design in this video let's get started now there are some issues with.
Accessibility when using new morphic buttons so here we can see we don't have a lot of contrast between the background and this element so this can make it difficult for users with poor vision or.
Color blindness to use it so you have to keep these things in mind when using these kinds of designs and with that out of the way let's get started right here i have opened up this folder called new.
Morphic button and i opened it with vs code now let's start by creating the necessary files so let's click on new file and let's create a file called index.html.
And let's also create a css file so i'll just name it style.css let's start with the index.html file and let's tap exclamation and press tab for this basic html5 code and here i'll.
Icons so here i have google for font awesome five cdn and you can find this link over here of cdnjs.com so let's go to the link and let's copy this uh cdn link from.
Here so i'll just click on this button called copy link tag and let's go back to our code and i'll just paste it over here inside the head section.
All right now let's continue with the design and here in the body i'll just create a button and for the button we will have a class of neomorphic button and here for the text i'll just type.
Click here and before the text we also need to have this icon so let's go to font awesome.com and let's search for the icon over here so.
I'll just type bookmark and here we can see this is the icon let's click on this and let's click on this code to copy it all right now let's go back to our html.
And let's paste it over here before the Wesdigital
Text right now we have the icon and the text and we have this button over here so let's open this in our browser so i have.This extension called live server installed in vs code so you can just install it and once you do that you can just right click over here in the html and click on open with live server.
Now here we can see we have this button and we also have this icon right now let's start with the styling so let's go to style.css and first of all i'll just add some styles to the body so i'll just.
Type body and here we'll just type background and for the background we will set a color of e6 e6 e6 and let's bring this to the center so i'll just type display.
Of grid and place items and i'll set it to the center and we'll also set the height to 100 report height and let's also remove the.
Margin right now we can see this button is in the center now let's style the button and for the button we have this class of new morphic button so let's select that.
Over here so i'll just type dot new morphe button and we will set a padding of 16 pixels top and bottom and 36 pixels left and right.
And we'll set the border radius to 24 pixels so now we can see we have rounded corners we'll also remove the border so i'll just add border and we'll just set.
It to none and now let's set the font family to roboto and i will also set the font size to 30 pixels and.
We'll set the font weight to 900
And let's set the background color of this button to the same color that we added over here so i'll just copy this and i'll just paste it over here and.Let's set the color of the text to 0 0 1 d 3d right now we will have a little bit of space between this icon and this text so if we go back to our html we can see that we have this icon.
And for the icon we are using an i tag so let's go back to our style.css file and let's target the i tag so i'll just type new morphic button i.
And we'll set a margin right and we'll set it to 16 pixels right now we can see we have the space between the icon and the text right now when we hover over this button we need to have.
The cursor set to pointer so i'll just type cursor pointer and now when we hover over this we have this pointer right now let's add the most important.
Property for new morphic design which is box shadow so let's type box shadow and we need to have two box shadows for new morphic design to work so for the first one i'll.
Just set a value of 3 pixels 5 pixels 12 pixels and for the color i'll just type c0 c0c0c0 and for the next shadow we'll just copy.
This and we need to negate some of these values so i'll just copy this and paste it over here and here we'll just type negative 3 and negative 5.
And for the color we'll just set it to white and now we can see we have this button which looks like it is extruded from the background so this is how new morphic elements are designed now the.
Last thing we need to do is add the hover effect so here i'll just type new morphic button colon hover now for the hover i'll just copy this line of code from here for the box shadow and i'll.
Just paste it down here and here we need to set the box shadow to inset so that the box shadow is inside the element and even here we'll just set it to now let's hover over this button and now.
We can see we have this hover effect i will also change the font size a little bit so here i'll just type font size and we'll just set it a little less than.
The font size over here so here we have 30 pixels and here in the hover effect i'll just type 29 point let's say 8 pixels and now if you hover over this we can.
See that it looks like the button is being pressed now you can also go ahead and fine tune these values over here so i'll just set this to 10 instead of 12.
And even here i'll just set it to 10 pixels and i'll also add a border so i just have border and we'll just set it to 2 pixels solid.
And rgba and here i'll just type 255 255 255 and 0.2 for the opacity right now let's hover over this button and we can see we have the horror effect and it looks.
Alright so that's basically how you create a new morphic button using html and css and that's 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 nice day .