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

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

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

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





改變字體圖層樣式

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

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

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





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

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

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

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

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;
}