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

}

还包含了鼠标放上去背景变白的效果，是不是又学到一招了呢