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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
9.
10.
11.
Latest Post
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)