CSS3 按钮 一分钟教程

admin 发表于 [CSS] 分类,标签: 网页布局
0

 

作为网站设计师,很多时候我们要用到按钮,作为链接或者是表格提交,如果还在使用旧式的默认按钮(button), 已经不能符合网站发展趋势,这里给大家一个很小的教程,只要短短一分钟,你就可以掌握CSS定义按钮的技巧,通过举一反三,做出自己喜欢的css按钮.
 

现在开始,我们先完成一个基本的按钮设计

  01     border:  1px solid #5d9046 ;
02   text-align:  center;
03   background:  #67AA25;
04   color:   #fff;
05   text-transform:   uppercase;
06   font-family:   Arial, Helvetica, Sans-Serif;
07   text-decoration:   none;
08   width:  156px;
09   font-size:    14px;
10   font-weight:   bold;
11   padding:   8px 0;
12   display:   block;

 


 

接下来 我们完成圆角设计, 我们要感谢css3, 因为完成圆角 只需要3行代码 就可以搞定。

  01     border-radius:  4px ;
02   -moz-border-radius:  4px;
03   -webkit-border-radius:  4px;

 


 

有点意思了吧, 下面把字体增加阴影, 同样css3 让我们很容易实现这个效果。

  01     text-shadow:  1px 1px 1px #666 ;
02   -moz-box-shadow:  0 1px 3px #111;
03   -webkit-box-shadow:  0 1px 3px #111;
03   box-shadow:  0 1px 3px #111;

 


 

基本完成了 我们增加一个背景渐变效果

  01     background:  #3F8EB5; /* old browsers */ ;
02   background :  -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */;
03   background :  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */;
04   filter:  progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3F8EB5′, endColorstr=’#1D76A0′,GradientType=0 ); /* ie */;



发表我的评论