建站
咨詢
售后
建站咨詢
新聞中心
用css寫一個(gè)簡(jiǎn)單的按鈕
button{?
成都創(chuàng)新互聯(lián)公司網(wǎng)站設(shè)計(jì)，為客戶量身定制各類網(wǎng)站建設(shè)業(yè)務(wù)，包括企業(yè)型、電子商務(wù)型、自適應(yīng)網(wǎng)站建設(shè)、行業(yè)門戶型等各類網(wǎng)站，實(shí)戰(zhàn)經(jīng)驗(yàn)豐富，成功案例眾多。以客戶利益為出發(fā)點(diǎn)，成都創(chuàng)新互聯(lián)公司網(wǎng)站制作為客戶規(guī)劃、按需定制符合企業(yè)需求、帶有營(yíng)銷價(jià)值的網(wǎng)絡(luò)建站方案認(rèn)真對(duì)待每一個(gè)客戶，我們不用口頭的語(yǔ)言來(lái)吹擂我們的優(yōu)秀，上千余家的成功案例見(jiàn)證著我們的成長(zhǎng)。
width:70px;
height:30px;
color:#fff;?
text-align:?center;?
background-color:#c00;?
color:#fff;
line-height:?28px;
border-radius:15px;?
border:0;?
outline:?0;?
transition:?background?0.2s?
}?
button:hover{?
background:#666
}
buttonGo/button
CSS可否改變?cè)O(shè)置按鈕的樣式？怎么做呢？菜鳥求教~
1、首先創(chuàng)建一個(gè)txt文件，修改后綴名：把.txt改為.html，用記事本打開添加如下代碼：打開瀏覽器，這是一個(gè)沒(méi)有添加樣式的button，外觀不美觀，而且在不同的瀏覽器下顯示的外觀是不一樣的，所以我們要添加統(tǒng)一的樣式。
2、按鈕樣式比較多，這樣寫讓代碼不整潔，可閱讀性差，就要用style標(biāo)簽。
3、style type="text/css"/style樣式表。style標(biāo)簽里面表示的是一個(gè)樣式表，我們所有的樣式都可以寫到標(biāo)簽中去。這段代碼的意思是：凡是button標(biāo)簽都使用這個(gè)樣式。
4、把 樣式表中的 ?button{}改成了.ui_button{}，然后在button標(biāo)簽里面加了class屬性，這樣做的意思是，這個(gè)button標(biāo)簽使用了名字為ui_button的樣式。
5、通過(guò)javascript動(dòng)態(tài)修改樣式，為了避免用戶多次點(diǎn)擊提交按鈕重復(fù)提交信息，在用戶點(diǎn)擊提交按鈕之后，禁用按鈕，并設(shè)置按鈕字體的顏色為灰色。
6、修改樣式的其他方法：obj.style.cssText = "color:#E1E1E1;background-color:black;";cssText可以寫多個(gè)樣式樣式屬性。
7、修改樣式的其他方法：obj.setAttribute("class", "style2");直接更改按鈕標(biāo)簽的class屬性，把指向名為ui_button的樣式改為指向名為style2的樣式。
8、修改樣式的其他方法：link href="css1.css" rel="stylesheet" type="text/css" id="css"/obj.setAttribute("href","css2.css");修改引用外部的樣式表文件，這樣就可以對(duì)整個(gè)頁(yè)面的樣式進(jìn)行全部更新。
如何制作一個(gè)漂亮的 css 按鈕
啟動(dòng)dreamweaver，點(diǎn)擊“站點(diǎn)”---“新建站點(diǎn)”
2
在彈出的窗口中，站點(diǎn)名稱為“漂亮按鈕”，本地站點(diǎn)文件夾可以根據(jù)需要選擇。點(diǎn)擊“保存”按鈕，站點(diǎn)創(chuàng)建成功。
END
二、創(chuàng)建css文件
1
點(diǎn)擊“文件”----“新建”，在彈出的窗體中選擇“空白頁(yè)”-----“CSS”，然后點(diǎn)擊“創(chuàng)建”按鈕。
2
點(diǎn)擊“文件”----“保存”，在文件名中輸入“style”，然后點(diǎn)擊“保存”，樣式表文件創(chuàng)建成功。
END
三、創(chuàng)建html頁(yè)面
1
點(diǎn)擊“文件”----“新建”，在彈出的窗體中選擇“空白頁(yè)”-----“HTML”---“無(wú)”。
2
在附加CSS文件中，選擇style.css樣式表文件，點(diǎn)擊“確定”。
3
點(diǎn)擊“創(chuàng)建”按鈕，生成HTML文件。點(diǎn)擊“文件”----“保存”按鈕，文件名設(shè)置為“index”，最后點(diǎn)擊保存即可。
END
三、在html頁(yè)面中添加一個(gè)按鈕控件
1
在“插入”-----“表單”中，點(diǎn)擊“按鈕”
2
在彈出的對(duì)話框中，什么也不需要修改，直接點(diǎn)擊“確定”。
3
在彈出窗口中，選擇“是“
4
按鈕添加成功，效果如下。
END
四、新建CSS規(guī)則
1
在CSS樣式表中，選擇“新建CSS規(guī)則“
2
在彈出的窗口中選擇”類（可應(yīng)用于任何HTML元素）“，選擇器名稱設(shè)置為“btnstyle”，然后點(diǎn)擊“確定”。
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;/*整個(gè)輪廓的寬度*/
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;/*邊框的粗細(xì)*/
border-right-width:1px;/*邊框的粗細(xì)*/
border-bottom-width:1px;/*邊框的粗細(xì)*/
border-left-width:1px;/*邊框的粗細(xì)*/
border-top-style:solid;/*邊框的樣式*/
border-right-style:solid;/*邊框的樣式*/
border-bottom-style:solid;/*邊框的樣式*/
border-left-style:solid;/*邊框的樣式*/
background-image:none;/*背景圖片*/
background-attachment:scroll;/*背景圖片是否移動(dòng)*/
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;/*背景圖像相對(duì)于內(nèi)邊距框來(lá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;
}
css中按鈕怎么設(shè)置
css設(shè)置按鈕樣式的方法:定義一個(gè)css選擇器,然后在按鈕標(biāo)簽中使用此選擇器即可設(shè)置按鈕樣式。使用:hover偽類選擇器可以設(shè)置按鈕 交互時(shí)樣式。
文章名稱：漂亮的按鈕樣式css,css好看的按鈕樣式
文章鏈接：http://www.dlmjj.cn/article/phgcsj.html
