深色底配荧光粉边框,多层发光营造赛博朋克感
← 返回 按钮 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx{background:#14121f;border-radius:10px}
.fx .neon{display:block;width:180px;margin:40px auto;padding:13px 0;text-align:center;border:2px solid #ff4de1;border-radius:10px;color:#fff;font-size:16px;letter-spacing:2px;text-shadow:0 0 8px #ff4de1;box-shadow:0 0 8px #ff4de1,0 0 20px rgba(255,77,225,.6),inset 0 0 8px rgba(255,77,225,.5);transition:all .3s;cursor:pointer;background:transparent}
.fx .neon:hover{box-shadow:0 0 15px #ff4de1,0 0 45px #ff4de1,inset 0 0 15px rgba(255,77,225,.8);transform:scale(1.05)}<div class="fx">
<button class="neon">NEON 按钮</button>
</div>