如何制作一個漂亮的 css 按鈕

啟動dreamweaver，點擊“站點”---“新建站點”

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括盈江網(wǎng)站建設(shè)、盈江網(wǎng)站制作、盈江網(wǎng)頁制作以及盈江網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，盈江網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到盈江省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

2

在彈出的窗口中，站點名稱為“漂亮按鈕”，本地站點文件夾可以根據(jù)需要選擇。點擊“保存”按鈕，站點創(chuàng)建成功。

END

二、創(chuàng)建css文件

1

點擊“文件”----“新建”，在彈出的窗體中選擇“空白頁”-----“CSS”，然后點擊“創(chuàng)建”按鈕。

2

點擊“文件”----“保存”，在文件名中輸入“style”，然后點擊“保存”，樣式表文件創(chuàng)建成功。

END

三、創(chuàng)建html頁面

1

點擊“文件”----“新建”，在彈出的窗體中選擇“空白頁”-----“HTML”---“無”。

2

在附加CSS文件中，選擇style.css樣式表文件，點擊“確定”。

3

點擊“創(chuàng)建”按鈕，生成HTML文件。點擊“文件”----“保存”按鈕，文件名設(shè)置為“index”，最后點擊保存即可。

END

三、在html頁面中添加一個按鈕控件

1

在“插入”-----“表單”中，點擊“按鈕”

2

在彈出的對話框中，什么也不需要修改，直接點擊“確定”。

3

在彈出窗口中，選擇“是“

4

按鈕添加成功，效果如下。

END

四、新建CSS規(guī)則

1

在CSS樣式表中，選擇“新建CSS規(guī)則“

2

在彈出的窗口中選擇”類（可應(yīng)用于任何HTML元素）“，選擇器名稱設(shè)置為“btnstyle”，然后點擊“確定”。

3

然后，在找到按鈕控件，將它的類設(shè)置為”btnstyle”

END

五、用CSS規(guī)則修改按鈕控件的外觀

1

.btnstyle {

width: 86px;/*按鈕控件的寬度*/

text-align: center;/*按鈕控件中文本居中顯示*/

line-height: 100%;/*用百分比設(shè)置行高*/

padding-top: 0.5em;/*文本頂部的內(nèi)邊距*/

padding-right: 2em;/*文本右側(cè)的內(nèi)邊距*/

padding-bottom: 0.55em;/*文本底部的內(nèi)邊距*/

padding-left: 2em;/*文本左側(cè)的內(nèi)邊距*/

font-family: "Arial Black", Gadget, sans-serif;/*字體*/

font-size: 14px;/*字體大小*/

font-style: normal;/*字體樣式*/

font-variant: normal;/*小寫字母*/

font-weight: normal;/*文本不需要加粗*/

text-decoration: none;/*文本不需要下劃線等*/

margin-top: 0px;/*外邊框的距離*/

margin-right: 2px;/*外邊框的距離*/

margin-bottom: 0px;/*外邊框的距離*/

margin-left: 2px;/*外邊框的距離*/

vertical-align: text-bottom;/*圖像放在文本下面*/

display: inline-block;/*段落內(nèi)生出內(nèi)框*/

cursor: pointer;/*鼠標(biāo)的形狀*/

zoom:1;

outline-width:medium;/*整個輪廓的寬度*/

outline-color:inherit;/*輪廓的顏色*/

font-size-adjust:none;

font-stretch:normal;

border-top-left-radius:0.5em;/*圓角邊框弧度*/

border-top-right-radius:0.5em;/*圓角邊框弧度*/

border-bottom-left-radius:0.5em;/*圓角邊框弧度*/

border-bottom-right-radius:0.5em;/*圓角邊框弧度*/

box-shadow:0px 1px 2px rgba(0,0,0,0.2);/*給按鈕增加陰影*/

color:#fefee9;/*設(shè)置文本的顏色*/

border-top-color:#da7c0c;/*邊框的顏色*/

border-right-color:#da7c0c;/*邊框的顏色*/

border-bottom-color:#da7c0c;/*邊框的顏色*/

border-left-color:#da7c0c;/*邊框的顏色*/

border-top-width:1px;/*邊框的粗細*/

border-right-width:1px;/*邊框的粗細*/

border-bottom-width:1px;/*邊框的粗細*/

border-left-width:1px;/*邊框的粗細*/

border-top-style:solid;/*邊框的樣式*/

border-right-style:solid;/*邊框的樣式*/

border-bottom-style:solid;/*邊框的樣式*/

border-left-style:solid;/*邊框的樣式*/

background-image:none;/*背景圖片*/

background-attachment:scroll;/*背景圖片是否移動*/

background-repeat:repeat;/*允許重復(fù)*/

background-position-x:0%;/*背景的x軸坐標(biāo)*/

background-position-y:0%;/*背景的y軸坐標(biāo)*/

background-size:auto;/*背景圖片的尺寸*/

background-origin:padding-box;/*背景圖像相對于內(nèi)邊距框來定位*/

background-clip:padding-box;/*背景被裁剪到內(nèi)邊距框*/

background-color:#f78d1d;/*背景顏色*/

}更多學(xué)習(xí)5 1 r g b

2

再寫一句mybtn的hover樣式。代碼如下：

.btnstyle:hover {

background-color: #f47c20;

}

CSS3 的按鈕怎么快速實現(xiàn)樣式

HTML結(jié)構(gòu)該鼠標(biāo)點擊按鈕特效中每一個可點擊的元素都是一個按鈕CSS樣式以下是該css3點擊按鈕特效的通用CSS樣式：插件中通過在點擊按鈕時使用javascript來為它添加相應(yīng)的動畫CLASS來執(zhí)行動畫效果：上面的CSS代碼可以生成如下圖的動畫效果：在“Stana”效果中，使用了html5SVGclipPath，在它上面添加了一個transition。這個效果只能在Chrome瀏覽器中才能看到效果。在“Stoja”效果中使用了CSSclip-path屬性，這個效果也需要瀏覽器的支持才能看得到的。

vs.net2005 web頁面如何使用css樣式文件

創(chuàng)建和應(yīng)用

CSS

樣式表

除了為單個元素設(shè)置內(nèi)聯(lián)樣式之外，還可以創(chuàng)建和應(yīng)用級聯(lián)樣式表

(CSS)

文件。級聯(lián)樣式表使您可以定義可應(yīng)用于多個控件和頁面的樣式，而不必分別編輯元素。

在演練的本節(jié)中，將創(chuàng)建樣式表，該樣式表使您可以使用用于設(shè)置內(nèi)聯(lián)樣式的相同工具。然后將樣式表應(yīng)用于正在編輯的頁面。

創(chuàng)建樣式表

在解決方案資源管理器中，右擊網(wǎng)站的名稱（如

C:\WebSites），再單擊“添加新項”。

在“Visual

Studio

已安裝的模板”之下單擊“樣式表”。

在“名稱”框中，鍵入“dark.css”，再單擊“添加”。

編輯器打開一個包含

body

樣式元素的新樣式表。

將插入點定位在左右大括號

({

})

之間，然后在“樣式”菜單上單擊“生成樣式”。

出現(xiàn)“樣式生成器

-

body”對話框。

單擊“字體”，在“字體屬性”下單擊位于“顏色”框右邊的省略號“(…)”，在“顏色選取器”對話框中單擊一種亮色，再單擊“確定”。

注意

請確保選擇一種與網(wǎng)站網(wǎng)頁的默認顏色不同的顏色。

單擊“背景”，單擊一種與前面步驟中選定的字體顏色對比的暗色（如“褐紫紅色”），再單擊“確定”關(guān)閉“樣式生成器

-

body”對話框。

將插入點定位到

body

元素的右大括號之后，右擊，再單擊“添加樣式規(guī)則”。

出現(xiàn)“添加樣式規(guī)則”對話框。

“添加樣式規(guī)則”對話框使您可以創(chuàng)建綁定到特定

HTML

元素類型、樣式類名或特定元素的新樣式。

單擊“類名”，然后在框中鍵入“reverse”。

這樣將創(chuàng)建一個名為

.reverse

的新樣式類。將能夠把為

.reverse

定義的樣式設(shè)置應(yīng)用于頁上的任何元素。還可以選擇創(chuàng)建類，以便它只能應(yīng)用于特定類型的元素（定位點、按鈕等），但是在本演練中將創(chuàng)建一個簡單的樣式類。

單擊“確定”以關(guān)閉“添加樣式規(guī)則”對話框。

使用樣式生成器或

IntelliSense

功能將

.reverse

樣式的顏色設(shè)置為與主體樣式的顏色相反的顏色。元素類似于如下所示：

.reverse

{

background-color:white;

color:maroon;

}

既然有樣式表，那么可以在正在編輯的頁中對其進行引用。

在網(wǎng)頁上引用樣式表

打開

Default.aspx

頁并切換到“設(shè)計”視圖。

從解決方案資源管理器中，將

dark.css

文件拖動到頁面上。

頁面已更新，并顯示樣式表的效果。

單擊“正方形”，然后在“屬性”中設(shè)置“CssClass”“reverse”。

這樣將反轉(zhuǎn)樣式應(yīng)用于“正方形”。

切換到“源”視圖。

在

head

元素中，可以看到編輯器已經(jīng)添加了引用樣式表的

link

元素。還可以看到

asp:button

元素的

cssclass

屬性已設(shè)置為

reverse。

右擊該頁，再單擊“在瀏覽器中查看”。

該頁出現(xiàn)在瀏覽器中，且已應(yīng)用樣式表。

名稱欄目：css按鈕樣式生成器,創(chuàng)建css樣式的快捷鍵
分享網(wǎng)址：http://chinadenli.net/article31/dsgejsd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、虛擬主機、網(wǎng)站營銷、網(wǎng)站建設(shè)、定制網(wǎng)站、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)