文、前端小編
設計網頁的時候要怎麼達到吸引使用者但又不太複雜的效果或特效呢?簡單的按鈕hover效果不只會豐富你的網頁,還會加強你的網頁設計感。下面就來一一介紹幾個簡單的按鈕hover效果吧!
在我們開始之前, 首先要先設置好HTML頁面,將一塊div標籤的class命名為demo,且建立三個a標籤,並將其class命名為hover,在依序新增對應的data-hover屬性。
<div class ="demo">
<a href ="#" class ="hover" data-hover ="HOME">HOME</ a>
<a href ="#" class ="hover" data-hover ="NEWS">NEWS</ a>
<a href ="#" class ="hover" data-hover ="ABOUT">ABOUT</ a>
</div >