css製作圖片按鈕

今天幫一朋友網站改版，需要製作3個圖標按鈕，之前小編想的是找圖片素材，不過後期不好維護，必然背景顏色修改，按鈕裡面文字長短變化等等，於是想到用css製作圖標按鈕效果。

這樣後期無論是字體大小修改，按鈕背景顏色，文本長短都方便修改。

css製作圖標按鈕

效果如上圖。代碼在呢麼寫呢？ 這個是html代碼

我們在看css代碼

.button{

width: 250px;

line-height: 55px;

text-align: center;

font-weight: bold;

color: #fff;

text-shadow:1px 1px 1px #333;

border-radius: 5px;

margin:0 20px 20px 0;

position: relative;

overflow: hidden;

}

.button a{ text-decoration: none;

color: white;}

.ez1{

position: fixed; left: 45%; top: 323px

}

.ez2{

position: fixed; left: 45%; top: 423px

}

.ez3{

position: fixed; left: 45%; top: 523px

}

.red:hover{

background: -webkit-linear-gradient(top,#eb6f6f,#c83c3c);

background: -moz-linear-gradient(top,#eb6f6f,#c83c3c);

background: linear-gradient(top,#eb6f6f,#c83c3c);

}

還包含了鼠標放上去背景變白的效果，是不是又學到一招了呢