Neo Circle
Neumorphic · .btn-neo-circle
Text
Class name
Color hue
Radius · n/a
Size
.btn-neo-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border: none;
border-radius: 50%;
background: #e0e5ec;
color: #6366f1;
font-family: inherit;
font-size: 22px;
font-weight: 600;
cursor: pointer;
box-shadow: 7px 7px 14px #bec3cf, -7px -7px 14px #ffffff;
transition: box-shadow 0.2s ease;
}
.btn-neo-circle:hover {
box-shadow: 4px 4px 10px #bec3cf, -4px -4px 10px #ffffff;
}
.btn-neo-circle:active {
box-shadow: inset 4px 4px 8px #bec3cf, inset -4px -4px 8px #ffffff;
}