按鈕css樣式代碼,按鈕大小css代碼

在CSS中如何設(shè)置一個(gè)按鈕鼠標(biāo)劃過變顏色。

需要準(zhǔn)備的材料分別有：電腦、瀏覽器、html編輯器。

成都創(chuàng)新互聯(lián)專注于臨潁企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開發(fā)。臨潁網(wǎng)站建設(shè)公司,為臨潁等地區(qū)提供建站服務(wù)。全流程按需制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的style標(biāo)簽中，輸入css代碼：button {background-color: #00a7d0}

button:hover {background-color: #ff7701}。

3、瀏覽器運(yùn)行index.html頁面，此時(shí)顯示出了藍(lán)色背景顏色的按鈕。

4、將鼠標(biāo)移入按鈕，此時(shí)按鈕的背景顏色變成了橙色。

css按鈕自適應(yīng)實(shí)現(xiàn)原理及代碼

按鈕自適應(yīng)原理是利用a標(biāo)簽和i標(biāo)簽各自一個(gè)背景組合成為按鈕，達(dá)到自適應(yīng)，具體實(shí)現(xiàn)css樣式及html結(jié)構(gòu)如下，感興趣的朋友可以參考下

原理：利用a標(biāo)簽和i標(biāo)簽各自一個(gè)背景組合成為按鈕，達(dá)到自適應(yīng)。

復(fù)制代碼

代碼如下:

!DOCTYPE

html

html

head

meta

charset="UTF-8"

style

type="text/css"

.btn

a{text-decoration:none;}

.btn{display:

inline-block;

background:

url(s_btn.png)

no-repeat

0;

height:

22px;

line-height:

22px;

color:

#666;

vertical-align:top;}

.btn

i{display:block;font-style:

normal;

font-size:

12px;

padding:

10px;

background:url(s_btn.png)

no-repeat

right

-22px;

}

.btn:hover{text-decoration:

none;color:#4c8136;background-position:

-44px;}

.btn:hover

i{background-position:

right

-66px;}

.btn:active{background-position:

-88px;}

.btn:active

i{background-position:

right

-110px;}

.btn_disabled,

.btn_disabled:hover{background:

url(../img/s_btn.png)

no-repeat

-132px;cursor:

default;}

.btn_disabled

i,

.btn_disabled:hover

i,

.s_btn_disabled:active

i{background-position:

right

-154px;color:#999;}

/style

/head

body

a

href="#"

class="btn"

i這是按鈕/i

/a

a

href="#"

class="btn"

i按鈕/i

/a

/body

/html

效果：

css中按鈕怎么設(shè)置

css設(shè)置按鈕樣式的方法:定義一個(gè)css選擇器,然后在按鈕標(biāo)簽中使用此選擇器即可設(shè)置按鈕樣式。使用:hover偽類選擇器可以設(shè)置按鈕 交互時(shí)樣式。

網(wǎng)站題目：按鈕css樣式代碼,按鈕大小css代碼
網(wǎng)站網(wǎng)址：http://muchs.cn/article6/phihog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、微信小程序、關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、網(wǎng)站改版、面包屑導(dǎo)航

廣告

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

小程序開發(fā)