在網頁設計中,按鈕是一個非常重要的元素,而為按鈕添加一些特效則能夠增強其視覺效果,CSS發光效果就是其中之一。
首先,在HTML文件中添加一個按鈕的代碼:
<button class="glow-btn">點我!</button>
然后,在CSS文件中設定按鈕的樣式:
.glow-btn { background-color: #3498db; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; text-transform: uppercase; position: relative; overflow: hidden; }
注意,在樣式中添加了position: relative;
和overflow: hidden;
,這是為了隱藏按鈕內部溢出元素和進行相對定位。下面,就是添加發光效果的核心代碼了:
.glow-btn::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; transition: all 0.5s ease-out; z-index: -1; } .glow-btn:hover::before { transform: translate(50%, 50%); }
通過偽元素::before
在按鈕的上一層添加一個圓形半透明的背景,之后在鼠標懸浮時使用transform: translate(50%, 50%);
讓半透明背景變為一個光點擴散出去,從而實現了按鈕的發光效果。
以上就是使用CSS實現發光效果按鈕的方法,如果你想要讓按鈕更加炫酷,可以嘗試添加其他動畫效果。具體實現方法可以參考CSS動畫相關知識。