Bevel Classic
3D & Tactile · .btn-bevel-classic
Text
Class name
Color hue
Radius · 8px
Size
.btn-bevel-classic {
display: inline-block;
padding: 12px 26px;
border: 1px solid #94a3b8;
border-radius: 8px;
background: linear-gradient(180deg, #f8fafc, #cbd5e1);
color: #334155;
font-family: inherit;
font-size: 15px;
font-weight: 600;
text-shadow: 0 1px 0 #ffffff;
cursor: pointer;
box-shadow: inset 0 1px 0 #ffffff, 0 2px 3px rgba(15, 23, 42, 0.2);
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-bevel-classic:hover {
background: linear-gradient(180deg, #ffffff, #e2e8f0);
}
.btn-bevel-classic:active {
background: linear-gradient(180deg, #cbd5e1, #e2e8f0);
box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.25);
}