CSS3 按钮 一分钟教程

标签: 教程 网页 创意设计 css | 发表时间:2011-08-22 08:28 | 作者:60kb Yangan
出处:http://www.poboo.com

作为网站设计师,很多时候我们要用到按钮,作为链接或者是表格提交,如果还在使用旧式的默认按钮(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 添加更多按钮效果。

你同样会喜欢:

设计收藏 国外photoshop教程网站

3D字体建筑创意设计

3D logo 设计作品

3M降噪耳机 广告设计

一条美丽的路

来自无觅网络的相关文章:

网页设计:40个大图作背景的页面设计 (@mysenz)

网页设计:25个充满创意的商业网站 (@mysenz)

數個利用CSS、Flash、Javascript製作的導覽列效果 (@mydesy)

30个专业的网页效果图教程分享 (@sudasuta)

3D篮球场 (@de1919)
无觅

相关 [css3 按钮 一分] 推荐:

CSS3 按钮 一分钟教程

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

11个CSS3按钮制作教程

- Ben - 我爱互联网
css3作为一个新技术,尽管某些浏览器不支持,但在过去的6个月里,css3已然吸引了设计师和Web开发人员的注意力. 实际上,有了CSS3,可以创建更好网站. 在本文,Jean-Baptiste Jung 整理收集了11个在CSS3中制作漂亮按钮的教程. 用CSS3和RGBA制作超酷按钮. 用CSS3制作Google风格按钮.

12组免费的CSS3 按钮强力推荐

- yun - 博客园新闻频道
一直以来,都是图片或是JavaScript用来创建按钮. 随着CSS3被更广泛的支持,我们有幸能够利用很好的CSS3按钮. 本文推荐12组免费的、拿来就用的CSS3按钮,不会让你失望.   本文链接:http://news.cnblogs.com/n/97749/.   · IE9正式版 HTML5 和 CSS3 的测试(2011-03-15).

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.