Chalkboard
Slate-green chalkboard with a chalk-drawn label and dusty grain. Hover smudges a faint eraser trail.
Chalkboard the 30th of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="btn-chalk"> <span class="btn-chalk-dust" aria-hidden="true"></span> <span class="btn-chalk-text">Today's Special</span> </button>
.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; }