Elastic Border Button

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="elastic-btn">
  <span>Learn More</span>
</button>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.elastic-btn {
  position: relative;
  padding: 14px 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #f5f5f5;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.elastic-btn::before,
.elastic-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 2px solid #facc15;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.elastic-btn::before {
  transform: scale(1);
}
.elastic-btn::after {
  background: rgba(250, 204, 21, 0.08);
  border-color: transparent;
  opacity: 0;
  transform: scale(0.9);
}
.elastic-btn:hover::before {
  transform: scale(1.12, 1.28);
}
.elastic-btn:hover::after {
  opacity: 1;
  transform: scale(1);
}
.elastic-btn span {
  position: relative;
  z-index: 1;
}
.elastic-btn:active::before {
  transform: scale(0.95);
}