Halftone Pattern Pop Button

<!--
  Author: @codepeek
  License: MIT
  Tags: #brutalist #buttons #playful
-->
<button class="pop-btn">Button</button>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #brutalist #buttons #playful
 */

.pop-btn {
  padding: 12px 32px;
  background-color: #facc15;
  background-image: radial-gradient(#000000 15%, transparent 16%);
  background-size: 6px 6px;
  border: 3px solid #000000;
  border-radius: 20px;
  color: #000000;
  font-family: system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 4px 4px 0px #000000;
  transition: all 0.15s ease;
}
.pop-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
}
.pop-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000000;
}