neumorphism hover effect

What is Neumorphism design?

2020 is just started and we already started to see some new trends in term of design.One of which is Neumorphism or Soft UI design effect.

Neumorphsim Design is also known as Soft UI Design. It one of the most important design trend which people are adopting in 2020. Here are few good examples:-

Best Neumorphism Hover effects[2020] 1 » Csspoint101
Credit:visit
Best Neumorphism Hover effects[2020] 2 » Csspoint101

Here’s what we are creating :

Best Neumorphism Hover effects[2020] 3 » Csspoint101

Html

<html>
<head>
    <meta charset="UTF-8">
    <title>Neumorphsim effect(Csspoint101.com) </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
</body>
     <a href="#"><span class="btn1" >Click Me</span></a>
     <div class="btn2">Hover Me</div>

</html>

Css

/*general css*/
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 100vh;
    background: #f2f3f7;
}

/*button css*/
a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 10px 30px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    color: #5a84a2;
    font-size: 18px;
    border-radius: 40px;
    box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
        -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        2px 2px 8px rgba(0, 0, 0, 0.15);
}

/*hover effect*/
a:hover {
    
    box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

.btn2 {
    position: absolute;
    padding: 10px 30px;
    width: 10%;
    height: 5%;
    left: 20%;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    color: #5a84a2;
    font-size: 16px;
    text-decoration: none;
    border-radius: 660px;
    background: linear-gradient(45deg, #dadbde, #ffffff);
    box-shadow: 9px -9px 18px #c9cacd,
        -9px 9px 18px #ffffff;
}
.btn2:hover{
	box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

Other Neumorphism CSS effects(Codepen)

Neumorphism Card hover effect (By- Marco Montilla)

See the Pen CSS Neumorphism Card UI Hover Effects by Marco Montilla (@marcomontilla) on CodePen.

Neumorphism Button hover effect (By- Cosimo Scarpa)

See the Pen Neumorphism UI // Button by Cosimo Scarpa (@coswise) on CodePen.

Neumorphism CSS effect (By- Web Cifar)

See the Pen Neumorphism CSS Effect by Web Cifar (@Web_Cifar) on CodePen.

Here’s what can help you more

Creating Neumorphism effect is not hard, just play with some shadow values and you can create on your own. But yesterday I saw a cool tool(Neumorphism.io) which can help in creating different sets of Neumorphism effect.You can create sets of effect on the browser and just copy the code and use in your project bamm!!!, isn’t it cool.

Disclaimer: Not sponsored or something, just thought it would be useful for you guys.

Best Neumorphism Hover effects[2020] 4 » Csspoint101

Thanks for reading my article. Do share if you liked the post with others. Also check out post on best free icon packs for your UI.