霓虹发光按钮 · 按钮
前端Wiki/CSS 特效合集/霓虹发光按钮

霓虹发光按钮

深色底配荧光粉边框,多层发光营造赛博朋克感

← 返回 按钮 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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

HTML 结构

HTML
<div class="fx">
<button class="neon">NEON 按钮</button>
</div>
实现要点:霓虹 = 多层 box-shadow 内外发光 + text-shadow;深色背景是前提

其它按钮类特效

回到 前端Wiki 首页 · CSS 特效合集