<a href="#" class="ctc-notch">
  <span class="ctc-notch-hole" aria-hidden="true"></span>
  <span class="ctc-notch-text">FIRST CLASS</span>
</a>

.ctc-notch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 28px;
  background: #ffd479;
  color: #0a0a0a;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.16em;
  text-decoration: none;
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.ctc-notch-hole {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.ctc-notch:hover {
  transform: translateX(2px);
  background: #ffe4a3;
}