Back to CSS Buttons Holographic Foil Pure CSS
Share
HTML
<button class="btn-holo">
  <span class="btn-holo-text">Mint NFT</span>
</button>
CSS
.btn-holo {
  position: relative;
  padding: 13px 28px;
  border: 2px solid #fff;
  border-radius: 6px;
  background:
    linear-gradient(115deg,
      #00d4ff 0%,
      #ff3d8c 30%,
      #3eff7f 55%,
      #fef34c 75%,
      #00d4ff 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  color: #1a0033;
  font-family: ui-monospace, monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 4px 18px rgba(0,212,255,0.35),
    0 4px 18px rgba(255,61,140,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.4);
  transition: background-position 0.5s cubic-bezier(.3,1,.3,1), transform 0.18s;
}
.btn-holo-text {
  background: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: 3px;
}
.btn-holo:hover {
  background-position: 100% 50%;
  transform: translateY(-2px) scale(1.02);
}