DEV Community

Cover image for Neumorphism Button Styles in CSS
Jon Snow
Jon Snow

Posted on

Neumorphism Button Styles in CSS

We made 11 neumophism button styles in css for your next project

Watch Tutorial

Don't miss the amazing video we've embedded in this post! Click the play button to be inspired

1.

Source Code

.neu {
  width: 300px;
  height: 300px;
  background: #eef0f4;
  border-radius: 100%;
  box-shadow: inset 9.91px 9.91px 15px #d9dade, inset -9.91px -9.91px 15px #fff;
}
Enter fullscreen mode Exit fullscreen mode

Neumorphism Example

2.

Source Code

.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #c1c3c6, #fff);
  border-radius: 100%;
  box-shadow: inset 9.91px 9.91px 15px #d9dade, inset -9.91px -9.91px 15px #ffff;
}
Enter fullscreen mode Exit fullscreen mode

Neumorphism Example

3.

Source Code

.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #fff, #c1c3c6);
  border-radius: 100%;
  box-shadow: 9.91px 9.91px 15px #d9dade, -9.91px -9.91px 15px #fff;
}
Enter fullscreen mode Exit fullscreen mode

Neumorphism Example

4.

Source Code

.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #cacccf, #fff);
  border-radius: 100%;
  box-shadow: 9.91px 9.91px 15px #d9dade, -9.91px -9.91px 15px #fff;
}
Enter fullscreen mode Exit fullscreen mode

Neumorphism Example

5.

Source Code

.neu {
  width: 300px;
  height: 300px;
  background: #eef0f4;
  border-radius: 15%;
  box-shadow: inset 9.91px 9.91px 15px #d9dade, inset -9.91px -9.91px 15px #fff;
}
Enter fullscreen mode Exit fullscreen mode

Neumorphism Example

6.

Source Code

 .neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #cdcfd2, #fff);
  border-radius: 15%;
  box-shadow: inset 9.91px 9.91px 15px #d9dade, inset -9.91px -9.91px 15px #fff;
}
Enter fullscreen mode Exit fullscreen mode

Neumorphism Example

7.

Source Code

.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #fff, #c4c6c9);
  border-radius: 15%;
  box-shadow: 9.91px 9.91px 15px #d9dade, -9.91px -9.91px 15px #fff;
}
Enter fullscreen mode Exit fullscreen mode

Neumorphism Example

8.

Source Code

.neu {
  width: 300px;
  height: 300px;
  background: linear-gradient(145deg, #cacccf, #fff);
  border-radius: 15%;
  box-shadow: 9.91px 9.91px 15px #d9dade, -9.91px -9.91px 15px #fff;
}
Enter fullscreen mode Exit fullscreen mode

Neumorphism Example

9.

Source Code

Neumorphism Example

10.

Source Code

Neumorphism Example

11.

Source Code

Neumorphism Example

Latest Post

jon_snow789

Awesome list of free CSS Generator

Jon Snow ・ Jul 8

#webdev #programming #css #tutorial

Thanks for Reading ❤️! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : Demo code

Top comments (0)

Read next

ozkeisar profile image

Mockingbird: New tool for your mock environments

ozkeisar -

sharma-tech profile image

The Easiest Way to Identify Flaky Tests in Jest

Shubham Sharma -

narender2031 profile image

How to use sockets in react-native [No Expo]

narender2031 -

sumedha00 profile image

@angular @fetchdata

Sumedha -