CSS3不用图片做好看按钮的代码案例

内容摘要

这篇文章主要为大家详细介绍了CSS3不用图片做好看按钮的简单示例，有喜欢html的小伙伴可以来参考一下。

文章正文

这篇文章主要为大家详细介绍了CSS3不用图片做好看按钮的简单示例，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记。
在网上看到了一篇文章Liquid & Color Adjustable CSS Buttons，感觉里面的那些按钮很漂亮，
作者是用半透明的PNG图片当遮罩，来实现好看的按钮。可惜我对美工那些东西一窍不通，照着里面的教程做PNG图片，搞了很久才弄出来，汗。
于是我就想，能不能用CSS3来实现类似的效果呢，那个图片有个渐变，然后加上半透明的效果。
现在最新的WebKit和Gecko都支持渐变的背景，而半透明用opacity就搞定了。下面就开始动手，先从制作按钮的遮罩层开始。
既然是遮罩层，那么肯定是浮动在按钮上面的（绝对定位），这里用top、left、right、bottom来调整高度和宽度来遮住按钮，加上上面说的渐变和透明。
我们将遮罩分为上下两个部分，上面的用渐变背景，下面的只要用纯色就可以了（其实用一个遮罩也可以实现，但是没有办法让遮罩的边框也渐变，所以用两个）。

代码是这样的：

CSS代码如下：

.mask-t, .mask-b {
  position: absolute;    
  -moz-box-sizing: border-box;
  -wekit-box-sizing: border-box;
  box-sizing: border-box;    
}
.mask-t {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 50%;
   
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;  
   
  background: -moz-linear-gradient(270deg, 
    rgba(117, 117, 117, .4) 10%, 
    rgba(94, 94, 94, .4) 30%
  );
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(rgba(117, 117, 117, .4)), to(rgba(94, 94, 94, .4))
  );
     
  border: 1px solid rgba(255, 255, 255, .4);
  border-bottom: none;
}
.mask-b {
  top: 50%;
  left: 1px;
  right: 1px;
  bottom: 0;
   
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px 0 0;  
   
  background: rgba(0, 0, 0, .3);
     
  border: 1px solid rgba(255, 255, 255, .3);
  border-top: none;
}

其实我也不是完全明白CSS3的gradient怎么用，怕讲错，所以这里就不解释了。做这个的时候，我是按照官方文档上的例子改的。
Gecko的：https://developer.mozilla.org/index.php?title=en/CSS/-moz-linear-gradient
WebKit的：http://webkit.org/blog/175/introducing-css-gradients/

遮罩层已经做好了，接下来做按钮。
按钮这个层要给遮罩提供定位，而且要设置按钮的大小、颜色，为了美观，我们给它加上圆角和阴影，这也是CSS3的内容。

下面是代码： CSS代码如下：


.button {
  position: relative;
  background: red;
  width: 160px;
  height: 40px;
  line-height: 40px;
   
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
   
  -moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  box-shadow:0 1px 3px rgba(0, 0, 0, .5);
}

改变.button的background就可以给按钮换颜色了。注意按钮的border-radius要设置成和遮罩层的一样，
我试图给按钮加上overflow: hidden然后去掉遮罩的border-radius，尽管这样，遮罩的四个角还是会显示出来，为什么会这样还请高手指点。
接下来，就是按钮的文字部分了，这个层要处在遮罩层的上方以便清楚的显示出文字。
和遮罩层一样，设置绝对定位，高宽都设为100%，由于我们的文字层在文档流里处在遮罩层的后面，所以就不用再设z-index了。
代码如下：
CSS代码如下：


.text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}

到这里，我们的按钮就做好了。这个按钮的优点是不用图片，减少了HTTP连接数，当然也减少了流量。
缺点是，这个按钮现在还没什么用，因为IE到目前为止不支持CSS3，虽然有滤镜，但不如用图片来得快。在这里祝愿IE被早日淘汰。

注：关于CSS3不用图片做好看按钮的简单示例的内容就先介绍到这里

代码注释

上一篇去掉inline-block元素之间水平空白的代码案例下一篇 CSS在表单元素里禁用输入法的简单示例

作者：喵哥笔记

学的不仅是技术，更是梦想！