PS繪制簡(jiǎn)單時(shí)尚的電子商務(wù)網(wǎng)站UI按鈕(4)

7。創(chuàng)建hover狀態(tài)
在圖層面板上新建一個(gè)組：Normal，把除背景外圖層全部拉到這個(gè)組里面。

使用“移動(dòng)工具”把組“Normal”拖到“新建圖層按扭”上，復(fù)制出一個(gè)組并命名：Hover

雙擊組“Hover”中的“黑色圖形”圖層，更改其"漸變疊加"樣式：

接下來(lái)，我們開始切片。
使用“切片工具”把按扭的范圍選中。在菜單欄找到：文件>另存為Web所用格式，另存為gif格式。

8。創(chuàng)建html

下面是按扭的鏈接代碼
========================

<a id="web_button" href="">Buy Now</a>

========================

按扭的CSS樣式
=====================
<style type="text/css">
#web_button {
    display: block;
    width: 170px;
    height: 50px;
    background: url(web_button.png) no-repeat 0 0;
  
    text-indent: -9999px;  /* 隱藏文字 */
   
    outline: none;
}

a:hover#web_button, a:focus#web_button {
   
    background: url(web_button.png) no-repeat 0 -50px; /* -50px是為了讓圖片上升以顯示hover狀態(tài) */
}
</style>