小技巧分享--超連結按鈕圖片替換

6/26/2014

一般來說我們在製作網頁時,如果做到超連結部分,通常我們都匯給使用者易點回饋,如果是文字超連結的話,就會讓使用者在做滑入時換一個顏色,如果要做的好看一點的話,這時我們就會製作一張美美的按鈕圖片來做滑入的切換!要做滑入滑出的切換有好幾種方法的,例如:找別人寫好的js檔,外連至我們的網頁,在該連結裡的圖片套入對應的class樣式,亦或著是自己寫javascript OR jquery 來達成,平時為了貪快,小弟都是採取第一種作法,但是今天要來教大家另一種方法,只需寫CSS就能達成!應該很多人都會了,但我們還是要為不會的朋友講解說明!

首先我們先來製作按鈕切換的圖片,把兩個按鈕切在同一張圖裡



再來就是直接撰寫CSS以及HTML了,程式碼如下圖:



寫好後就來預覽看看囉!!



點我看DEMO

回上一頁

歡迎隨時來電與元盛網頁設計公司諮詢

歡迎隨時來電諮詢

立即與元盛聯繫