photoshop網(wǎng)頁(yè)應(yīng)用教程:制作一個(gè)簡(jiǎn)潔干凈的按鈕(3)

復(fù)制字體圖層為翻轉(zhuǎn)按鈕

27 保持字體的圖層始終未選中狀態(tài)，單擊該圖層然后選擇 復(fù)制圖層 。移動(dòng)到下半個(gè)按鈕上面。

28 Ctrl + 單擊 Rollover圖層，創(chuàng)建一個(gè)選區(qū)。按照25/26步驟，進(jìn)行字體和選區(qū)的對(duì)齊。





改變字體圖層樣式

29 雙擊字體圖層，打開(kāi)圖層樣式圖層。保持其他設(shè)置不變，更改顏色為深藍(lán)色 (#0f2557)。

好了，photoshop部分的東西就做完了!

如果你一直按照步驟來(lái)做，那么你的最后的效果應(yīng)該和下圖一樣。





現(xiàn)在開(kāi)始學(xué)習(xí) HTML 和 CSS 的部分。

30 保存圖片為 campaign-monitor-button.png.

31 創(chuàng)建一個(gè) HTML 文檔。和圖片campaign-monitor-button.png 放在同一個(gè)文件夾中。

HTML的部分
基本的工作原理很簡(jiǎn)單，一個(gè)鏈接在一個(gè)一個(gè)段落標(biāo)記。我選擇用一個(gè)段落標(biāo)記 p 作為包裝/容器，因?yàn)槲矣X(jué)得請(qǐng) a 內(nèi)容不應(yīng)獨(dú)立。如果沒(méi)有 p 它將不會(huì)作用。

p a href="#null" Click this button /a /p
CSS的部分
css的部分就是圖片翻轉(zhuǎn)的技巧。

.button {

        display:block;
        width:250px;
        height:50px;
        text-indent:-9999px;
}
.button a {
        display:block;
        width:100%;
        height:100%;
        background:transparent url(campaign-monitor-button.png) no-repeat top left;
        outline:none;
}
.button a:hover {
        background-position:0 -50px;
}