css中如何实现不同的button样式

这篇文章将为大家详细讲解有关css中如何实现不同的button样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

为修武等地区用户提供了全套网页设计制作服务,及修武网站建设行业解决方案。主营业务为成都网站制作、做网站、修武网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

在网页设计过程中,程序员们常常需要配合美工来设计页面的美观效果,当然大部分页面风格都是美工的工作。但是按钮button样式,是我们程序员最常用的。

注:源码里面使用了多种html标签做成按钮,有a,input,span,div,p,h4。总有适合你的标签

button样式源码如下:

Demo:CSS3Buttons

body{

background:#ededed;

width:900px;

margin:30pxauto;

color:#999;

}

p{

margin:002em;

}

h2{

margin:0;

}

a{

color:#339;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

div{

padding:20px0;

border-bottom:solid1px#ccc;

}

/*button

----------------------------------------------*/

.button{

display:inline-block;

zoom:1;/*zoomand*display=ie7hackfordisplay:inline-block*/

*display:inline;

vertical-align:baseline;

margin:02px;

outline:none;

cursor:pointer;

text-align:center;

text-decoration:none;

font:14px/100%Arial,Helvetica,sans-serif;

padding:.5em2em.55em;

text-shadow:01px1pxrgba(0,0,0,.3);

-webkit-border-radius:.5em;

-moz-border-radius:.5em;

border-radius:.5em;

-webkit-box-shadow:01px2pxrgba(0,0,0,.2);

-moz-box-shadow:01px2pxrgba(0,0,0,.2);

box-shadow:01px2pxrgba(0,0,0,.2);

}

.button:hover{

text-decoration:none;

}

.button:active{

position:relative;

top:1px;

}

.bigrounded{

-webkit-border-radius:2em;

-moz-border-radius:2em;

border-radius:2em;

}

.medium{

font-size:12px;

padding:.4em1.5em.42em;

}

.small{

font-size:11px;

padding:.2em1em.275em;

}

/*colorstyles

----------------------------------------------*/

/*black*/

.black{

color:#d7d7d7;

border:solid1px#333;

background:#333;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#666),to(#000));

background:-moz-linear-gradient(top,#666,#000);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');

}

.black:hover{

background:#000;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#444),to(#000));

background:-moz-linear-gradient(top,#444,#000);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');

}

.black:active{

color:#666;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#000),to(#444));

background:-moz-linear-gradient(top,#000,#444);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#666666');

}

/*gray*/

.gray{

color:#e9e9e9;

border:solid1px#555;

background:#6e6e6e;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#888),to(#575757));

background:-moz-linear-gradient(top,#888,#575757);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#575757');

}

.gray:hover{

background:#616161;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#757575),to(#4b4b4b));

background:-moz-linear-gradient(top,#757575,#4b4b4b);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',endColorstr='#4b4b4b');

}

.gray:active{

color:#afafaf;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#575757),to(#888));

background:-moz-linear-gradient(top,#575757,#888);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',endColorstr='#888888');

}

/*white*/

.white{

color:#606060;

border:solid1px#b7b7b7;

background:#fff;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#ededed));

background:-moz-linear-gradient(top,#fff,#ededed);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');

}

.white:hover{

background:#ededed;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#dcdcdc));

background:-moz-linear-gradient(top,#fff,#dcdcdc);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dcdcdc');

}

.white:active{

color:#999;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#ededed),to(#fff));

background:-moz-linear-gradient(top,#ededed,#fff);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff');

}

/*orange*/

.orange{

color:#fef4e9;

border:solid1px#da7c0c;

background:#f78d1d;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#faa51a),to(#f47a20));

background:-moz-linear-gradient(top,#faa51a,#f47a20);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');

}

.orange:hover{

background:#f47c20;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#f88e11),to(#f06015));

background:-moz-linear-gradient(top,#f88e11,#f06015);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');

}

.orange:active{

color:#fcd3a5;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#f47a20),to(#faa51a));

background:-moz-linear-gradient(top,#f47a20,#faa51a);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');

}

/*red*/

.red{

color:#faddde;

border:solid1px#980c10;

background:#d81b21;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#ed1c24),to(#aa1317));

background:-moz-linear-gradient(top,#ed1c24,#aa1317);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317');

}

.red:hover{

background:#b61318;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#c9151b),to(#a11115));

background:-moz-linear-gradient(top,#c9151b,#a11115);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');

}

.red:active{

color:#de898c;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#aa1317),to(#ed1c24));

background:-moz-linear-gradient(top,#aa1317,#ed1c24);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24');

}

/*blue*/

.blue{

color:#d9eef7;

border:solid1px#0076a3;

background:#0095cd;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#00adee),to(#0078a5));

background:-moz-linear-gradient(top,#00adee,#0078a5);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5');

}

.blue:hover{

background:#007ead;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#0095cc),to(#00678e));

background:-moz-linear-gradient(top,#0095cc,#00678e);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',endColorstr='#00678e');

}

.blue:active{

color:#80bed6;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#0078a5),to(#00adee));

background:-moz-linear-gradient(top,#0078a5,#00adee);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');

}

/*rosy*/

.rosy{

color:#fae7e9;

border:solid1px#b73948;

background:#da5867;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#f16c7c),to(#bf404f));

background:-moz-linear-gradient(top,#f16c7c,#bf404f);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');

}

.rosy:hover{

background:#ba4b58;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#cf5d6a),to(#a53845));

background:-moz-linear-gradient(top,#cf5d6a,#a53845);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',endColorstr='#a53845');

}

.rosy:active{

color:#dca4ab;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#bf404f),to(#f16c7c));

background:-moz-linear-gradient(top,#bf404f,#f16c7c);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',endColorstr='#f16c7c');

}

/*green*/

.green{

color:#e8f0de;

border:solid1px#538312;

background:#64991e;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#7db72f),to(#4e7d0e));

background:-moz-linear-gradient(top,#7db72f,#4e7d0e);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e');

}

.green:hover{

background:#538018;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#6b9d28),to(#436b0c));

background:-moz-linear-gradient(top,#6b9d28,#436b0c);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c');

}

.green:active{

color:#a9c08c;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#4e7d0e),to(#7db72f));

background:-moz-linear-gradient(top,#4e7d0e,#7db72f);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',endColorstr='#7db72f');

}

/*pink*/

.pink{

color:#feeef5;

border:solid1px#d2729e;

background:#f895c2;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#feb1d3),to(#f171ab));

background:-moz-linear-gradient(top,#feb1d3,#f171ab);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');

}

.pink:hover{

background:#d57ea5;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#f4aacb),to(#e86ca4));

background:-moz-linear-gradient(top,#f4aacb,#e86ca4);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',endColorstr='#e86ca4');

}

.pink:active{

color:#f3c3d9;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#f171ab),to(#feb1d3));

background:-moz-linear-gradient(top,#f171ab,#feb1d3);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',endColorstr='#feb1d3');

}

CSS3GradientButtons

byWebDesignerWall

Rectangleor

RoundedCanbe

Mediumor

Small



ButtonTag

Span

Div

PTag

H3

Gray

Rounded

Medium

Small



ButtonTag

Span

Div

PTag

H3

White

Rounded

Medium

Small



ButtonTag

Span

Div

PTag

H3

Orange

Rounded

Medium

Small



ButtonTag

Span

Div

PTag

H3

Red

Rounded

Medium

Small



ButtonTag

Span

Div

PTag

H3

Blue

Rounded

Medium

Small



ButtonTag

Span

Div

PTag

H3

Rosy

Rounded

Medium

Small



ButtonTag

Span

Div

PTag

H3

Green

Rounded

Medium

Small



ButtonTag

Span

Div

PTag

H3

Pink

Rounded

Medium

Small



ButtonTag

Span

Div

PTag

H3


关于“css中如何实现不同的button样式”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


本文名称:css中如何实现不同的button样式
转载注明:http://scyanting.com/article/pgihgd.html

其他资讯