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);
}