CSS
.btn-chalk {
position: relative;
padding: 14px 30px;
border: 4px solid #c9a15e;
border-radius: 6px;
background:
repeating-linear-gradient(45deg,
rgba(232,226,208,0.04) 0 1px,
transparent 1px 4px),
#1e2a23;
color: #e8e2d0;
font-family: 'Caveat', 'Comic Sans MS', cursive, ui-serif;
font-size: 17px; font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
box-shadow: inset 0 0 24px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
overflow: hidden;
transition: filter 0.18s ease;
}
.btn-chalk-dust {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 30%, rgba(232,226,208,0.06), transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(232,226,208,0.04), transparent 60%);
pointer-events: none; opacity: 0;
transition: opacity 0.3s ease;
}
.btn-chalk-text { position: relative; text-shadow: 0 0 1px rgba(232,226,208,0.4); }
.btn-chalk:hover .btn-chalk-dust { opacity: 1; }