html制作响应式按钮,用CSS3制作立体按钮——w3cdream|前端学习-开发

今天w3c梦想站写了一个按钮效果，是运用CSS3技术，达到了圆角、渐变、阴影等效果，希望能够帮助那些前端学习的学生们，并多多支持我们w3c梦想站，我们会每天都会有个效果上传，希望大家多多关注我们w3c梦想站，每天都会有不一样的精彩。

CSS代码：

#button

{

position: relative;

display: inline-block;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

border: 1px solid #ccc;

border-radius: 3px;

color: #aaa;

font-weight: bolder;

text-shadow: 0 1px 0 #eee;

background-image: -webkit-linear-gradient(top,#eee 0%,#ddd 100%);

background-image: -moz-linear-gradient(top,#eee 0%,#ddd 100%);

background-image: -ms-linear-gradient(top,#eee 0%,#ddd 100%);

background-image: -o-linear-gradient(top,#eee 0%,#ddd 100%);

background-image: linear-gradient(top,#eee 0%,#ddd 100%);

}

#button:before

{

content: "";

position: absolute;

left: 0;

top: 0;

width: 100%;

border-top: 2px solid #fff;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

}

#button:after

{

content: "";

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: -1;

background-color: #fff;

border-bottom-left-radius: 40px 8px;

border-bottom-right-radius: 40px 8px;

box-shadow: 0 8px 10px -4px #333;

}

#button:active:after

{

border-bottom-left-radius: 0;

border-bottom-right-radius: 0;

box-shadow: 0 5px 10px -4px #333;

}

HTML代码：

download

效果图：

如需转载，请注明出处：w3c梦想站