<section>
<h2>CTA - Default</h2>
<div class="neumorphic variation1">
<span><strong>★</strong></span>
</div>
</section>
<section>
<h2>CTA - Pressed</h2>
<div class="neumorphic neumorphic--pressed variation1 pressed">
<span><strong>★</strong></span>
</div>
</section>
<section>
<h2>Toggle - Default</h2>
<div class="neumorphic variation2">
<span><strong>Auto</strong></span>
</div>
</section>
<section>
<h2>Toggle - Pressed</h2>
<div class="neumorphic neumorphic--pressed variation2 pressed">
<span><strong>Auto</strong></span>
</div>
</section>
body {
padding: 3rem 4rem 0;
background-color: #e0e0e0;
color: #999;
display: flex;
flex-wrap: wrap;
max-width: 680px;
font-family: "Arial", sans-serif;
margin: 0 auto;
}
section {
flex: 1 1 50%;
padding-bottom: 3rem;
}
h2 {
margin-top: 0;
margin-bottom: 1.5rem;
}
* {
box-sizing: border-box;
}
.neumorphic {
box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2),
-12px -12px 24px 0 rgba(255, 255, 255, 0.5);
font-size: 5rem;
width: 200px;
height: 200px;
border-radius: 40px;
overflow: hidden;
padding: 1.3rem;
display: flex;
}
.neumorphic--pressed {
box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2),
inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}
.variation1 {
background: linear-gradient(
-45deg,
rgba(0, 0, 0, 0.2),
rgba(255, 255, 255, 0.3)
);
}
.variation1 span {
display: flex;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
border-radius: 100%;
overflow: hidden;
padding: 0.65rem;
box-shadow: inset 8px 8px 16px 0 rgba(0, 0, 0, 0.2),
inset -8px -8px 16px 0 rgba(255, 255, 255, 0.4);
}
.variation1 strong {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 100%;
overflow: hidden;
background-color: #f13c20;
color: white;
}
.variation1.pressed strong {
background-color: #bb3c20;
}
.variation2 {
justify-content: space-around;
align-items: center;
}
.variation2 span {
display: block;
padding-bottom: 1.5rem;
position: relative;
font-size: 3rem;
}
.variation2 span::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
height: 0.3rem;
border-radius: 1rem;
width: 50%;
margin: 0 auto;
background-color: currentColor;
}
.variation2.pressed {
color: #5ab9ea;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.