CSS3 按钮 一分钟教程
- Yangan - Poboo作为网站设计师,很多时候我们要用到按钮,作为链接或者是表格提交,如果还在使用旧式的默认按钮(button), 已经不能符合网站发展趋势,这里给大家一个很小的教程,只要短短一分钟,你就可以掌握CSS定义按钮的技巧,通过举一反三,做出自己喜欢的css按钮.. 现在开始,我们先完成一个基本的按钮设计. 接下来 我们完成圆角设计, 我们要感谢css3, 因为完成圆角 只需要3行代码 就可以搞定.
作为网站设计师,很多时候我们要用到按钮,作为链接或者是表格提交,如果还在使用旧式的默认按钮(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 */; |
完成了 很简单吧,同时你可以通过 :hover 和 :active 添加更多按钮效果。