注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

CSS3 Gradient Buttons(CSS3实现渐变效果的按钮)  

2011-05-20 13:21:39|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

button states

What Is So Cool About These Buttons?

  • Pure CSS: no image or Javascript is used.
  • The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
  • Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
  • It has three button states: normal, hover, and active.
  • It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
  • Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).

Preview

The image below shows how the button will display in different browsers.

preview

Button States

  • normal state = gradient with border and shadow styles.
  • hover = darker gradient
  • active = gradient is reversed, 1px down, and darker font color as well.

button states

General Styles For The Button

The following code is the general styles for the .button class. I use em value in the padding and border-radius property to make it scalable base on the font-size. To adjust the rounded corners and button size, simply change the border-radius, font-size and padding values. For example: I can make a smaller button by decreasing the font-size and padding values (see demo).

For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3.

.button {  display: inline-block;  outline: none;  cursor: pointer;  text-align: center;  text-decoration: none;  font: 14px/100% Arial, Helvetica, sans-serif;  padding: .5em 2em .55em;  text-shadow: 0 1px 1px rgba(0,0,0,.3);  -webkit-border-radius: .5em;   -moz-border-radius: .5em;  border-radius: .5em;  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  box-shadow: 0 1px 2px rgba(0,0,0,.2); } .button:hover {  text-decoration: none; } .button:active {  position: relative;  top: 1px; }

Color Gradient Styles

The code below is the CSS styling for the orange button. The first background line is a fallback for the non-CSS3 browsers, the second line is for Webkit browsers, the third line is for Firefox, and the last line is a gradient filter that is only read by Internet Explorer.

For more details on CSS gradient, read my article Cross-Browser CSS Gradient.

.orange {  color: #fef4e9;  border: solid 1px #da7c0c;  background: #f78d1d;  background: -webkit-gradient(linear, left top, left bottom, 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, left top, left bottom, 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, left top, left bottom, from(#f47a20), to(#faa51a));  background: -moz-linear-gradient(top,  #f47a20,  #faa51a);  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); }

button general styles

How To Use My Buttons?

Lets say you like the blue button and want to use it on your page:

  • First, copy the .button and .blue CSS (view demo source code).
  • Then, add class="button blue" to the HTML element where you want the button to be (eg. <a href="#" class="button blue">Button</a>). The CSS classes can be applied to any element such as link, p, span, div, input, button, etc.

 applying

相关参考:

Cross-Browser CSS Gradient

CSS3 Dropdown Menu

  评论这张
 
阅读(1285)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017