Hello Friends. In this blog, we will share a snippet about how to create a Simple Neumorphism Effect on Hover using HTML and CSS. Neumorphism is one of the latest trends in UI design. It is being used in mobile and web UI design nowadays. Here we will try to use this effect in the hover of some social media icons. For those who are learning about Neumorphism, this might come in handy. Take a look at what the snippet looks like in the demo video below.
Neuromorphic design is a visual trend that has attracted UI / UX designers. The word Neumorphism is a combination of the two words new and skeuomorphism. This trend is used to design different elements of the App and the web. These elements are buttons, Graph, Card, etc. In this project, we have taken a container div first. We have taken some social media icons with some anchor tags on them. We have used the display grid property to bring the container of this project to the center of the viewport. The background color is then used for the body element to better visualize the neumorphism effect. Each anchor element is given a specific height and width. Then margins, border-radius, etc. have been styled. Then a box of Shadow Properties has been used in Hover which is our Required Effect. A transition property has been used in its parent div to make the animation smooth.
You May Also Like:
Neumorphism Button Hover CSS Animation [ Source Code ]:
To create a snippet, you must create an HTML file and then a CSS file. Since the social media icon has been used here, the font awesome CDN must be added to the project. Then the external stylesheet has to be attached to the HTML file. Copy and paste the source code given below into your project. Save it, open it in your browser and see if it works.
ADD HTML:
ADD CSS:
Hope the snippet is working. Visit our website regularly to get more source code like this. Thank you for visiting our website.
Post a Comment
Please do not enter any spam link in the comment box.