CSS3+光暈按鈕是一種非常流行的網頁設計技術,可以讓按鈕看起來更加立體化,給用戶帶來更好的視覺體驗。下面我們將通過一段示例代碼來演示如何使用CSS3+光暈按鈕。
.btn { font-size: 16px; font-weight: bold; color: #fff; background-color: #4CAF50; border: none; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .btn:hover { background-color: #3e8e41; box-shadow: 0 5px 20px rgba(0,0,0,0.4), 0 0 40px rgba(62, 142, 65, 0.2) inset; }
如上代碼所示,我們首先定義了一個.btn類,來設置按鈕的基本樣式,包括字體大小、顏色、背景色和邊框等。然后我們使用border-radius屬性來使按鈕更圓潤,同時使用box-shadow屬性來添加陰影效果,讓按鈕看起來更加立體化。
接下來,我們定義了一個.btn:hover類,在鼠標懸停在按鈕上時觸發,來改變按鈕的樣式。我們將背景顏色改為深綠色,同時添加了更加明顯的陰影效果,以及一個光暈效果。其中,box-shadow屬性中的第一個參數表示水平偏移量,第二個參數表示垂直偏移量,第三個參數表示陰影半徑,第四個參數表示陰影顏色。而光暈效果的實現則是通過在box-shadow屬性中添加inset關鍵字來達到的。
通過以上代碼,我們就可以非常簡單地實現一個美觀而又實用的CSS3+光暈按鈕,為網頁設計增添很多亮點和活力,讓用戶更愉悅地使用網站。