Back to CSS Buttons Chalkboard Pure CSS
Share
HTML
<button class="btn-chalk">
  <span class="btn-chalk-dust" aria-hidden="true"></span>
  <span class="btn-chalk-text">Today's Special</span>
</button>
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; }