Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Last active Feb 7, 2020
Embed
What would you like to do?
Neumorphism Buttons
<div class="button"><span>Click Me</span></div>
<div class="button"><span>Hover</span></div>
<div class="button"><span>Clicked</span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #f3f0f1;
.button {
width: 400px;
height: 100px;
background: #f3f0f1;
position: relative;
background: #f3f0f1;
margin-bottom: 25px;
border-radius: 32px;
text-align: center;
cursor: pointer;
transition: all 0.1s ease-in-out;
span {
line-height: 100px;
font-family: "Montserrat", sans-serif;
font-size: 32px;
font-weight: semibold;
}
&:nth-child(1) {
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
color: #6f6cde;
&:hover {
opacity: 0.3;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
}
&:active {
opacity: 1;
box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
inset 8px 8px 16px rgba(0, 0, 0, 0.1);
color: #79e3b6;
}
}
&:nth-child(2) {
opacity: 0.3;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
color: #6f6cde;
}
&:nth-child(3) {
box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
inset 8px 8px 16px rgba(0, 0, 0, 0.1);
color: #79e3b6;
&:hover {
opacity: 1;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
}
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment