使用伪元素创建不同风格CSS3 Button



今天我们来使用伪元素来创建不同风格CSS3 button，我们只用一个超链接标签来作为按钮的HTML结构，然后通过强大的CSS来实现Button的样式，当然本篇文章主要是通过使用伪元素。

css3 button

在线演示  源码下载

一些说明：

文章中的css代码将不加入开发商前缀，否则css代码是在是太长了，但是你可以在下载的源码中找到他们。同时我将不使用CSS transitions，因为目前为止只有Firefox支持在伪元素上使用他们，但是我相信即使不适用它，一样可以做出漂亮的Button.

HTML标签：

非常简单的一个超链接标签结构。

  1. <a href="#" class="a_demo_one">
  2.      Click me!
  3. </a>

样式一：透明边框风格

css3 button样式一

首先我们定义Button的基础样式，还有激活时的样式。

  1. .a_demo_one {
  2.     background-color:#ba2323;
  3.     padding:10px;
  4.     position:relative;
  5.     font-family: 'Open Sans', sans-serif;
  6.     font-size:12px;
  7.     text-decoration:none;
  8.     color:#fff;
  9.     border: solid 1px #831212;
  10.     background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
  11.     border-radius: 5px;
  12. }
  13.  
  14. .a_demo_one:active {
  15.     padding-bottom:9px;
  16.     padding-left:10px;
  17.     padding-right:10px;
  18.     padding-top:11px;
  19.     top:1px;
  20.     background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
  21. }

接下来我们使用::before伪元素来为Button创建一个边框容器，这里使用绝对定位。

  1. .a_demo_one::before {
  2.     background-color:#ccd0d5;
  3.     content:"";
  4.     display:block;
  5.     position:absolute;
  6.     width:100%;
  7.     height:100%;
  8.     padding:8px;
  9.     left:-8px;
  10.     top:-8px;
  11.     z-index:-1;
  12.     border-radius: 5px;
  13.     box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
  14. }

样式二：3D风格1

css3 button 样式二

css:

  1. .a_demo_two {
  2.     background-color:#6fba26;
  3.     padding:10px;
  4.     position:relative;
  5.     font-family: 'Open Sans', sans-serif;
  6.     font-size:12px;
  7.     text-decoration:none;
  8.     color:#fff;
  9.     background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
  10.     box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
  11.     border-radius: 5px;
  12. }
  13.  
  14. .a_demo_two:active {
  15.     top:7px;
  16.     background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
  17.     box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
  18.     color: #156785;
  19.     text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
  20.     background: rgb(44,160,202);
  21. }

伪元素样式：因为伪元素的位置是绝对定位，所以位置依赖它的父元素。所以一旦父元素向下移动几个像素，伪元素就需要向上移动相同的像素。

  1. .a_demo_two::before {
  2.     background-color:#072239;
  3.     content:"";
  4.     display:block;
  5.     position:absolute;
  6.     width:100%;
  7.     height:100%;
  8.     padding-left:2px;
  9.     padding-right:2px;
  10.     padding-bottom:4px;
  11.     left:-2px;
  12.     top:5px;
  13.     z-index:-1;
  14.     border-radius: 6px;
  15.     box-shadow: 0px 1px 0px #fff;
  16. }
  17.  
  18. .a_demo_two:active::before {
  19.     top:-2px;
  20. }

样式三：3D风格2

css3 button样式三

这里注意一下margin-left是为了填补伪元素的位置。

  1. .a_demo_three {
  2.     background-color:#3bb3e0;
  3.     font-family: 'Open Sans', sans-serif;
  4.     font-size:12px;
  5.     text-decoration:none;
  6.     color:#fff;
  7.     position:relative;
  8.     padding:10px 20px;
  9.     border-left:solid 1px #2ab7ec;
  10.     margin-left:35px;
  11.     background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  12.     border-top-right-radius: 5px;
  13.     border-bottom-right-radius: 5px;
  14.     box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
  15. }
  16.  
  17. .a_demo_three:active {
  18.     top:3px;
  19.     background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
  20.     box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
  21. }

伪元素CSS：

  1. .a_demo_three::before {
  2.     content:"·";
  3.     width:35px;
  4.     max-height:29px;
  5.     height:100%;
  6.     position:absolute;
  7.     display:block;
  8.     padding-top:8px;
  9.     top:0px;
  10.     left:-36px;
  11.     font-size:16px;
  12.     font-weight:bold;
  13.     color:#8fd1ea;
  14.     text-shadow:1px 1px 0px #07526e;
  15.     border-right:solid 1px #07526e;
  16.     background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
  17.     border-top-left-radius: 5px;
  18.     border-bottom-left-radius: 5px;
  19.     box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
  20. }
  21.  
  22. .a_demo_three:active::before {
  23.     top:-3px;
  24.     box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
  25. }

样式四：3D风格3

cscss3 button样式四

我们使用一个箭头图标作为背景，当然你也可以替换成任何你喜欢的图标。

  1. .a_demo_four {
  2.     background-color:#4b3f39;
  3.     font-family: 'Open Sans', sans-serif;
  4.     font-size:12px;
  5.     text-decoration:none;
  6.     color:#fff;
  7.     position:relative;
  8.     padding:10px 20px;
  9.     padding-right:50px;
  10.     background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
  11.     border-radius: 5px;
  12.     box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
  13. }
  14.  
  15. .a_demo_four:active {
  16.     top:3px;
  17.     background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
  18.     box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
  19. }
  20.  
  21. .a_demo_four::before {
  22.     background-color:#322620;
  23.     background-image:url(../images/right_arrow.png);
  24.     background-repeat:no-repeat;
  25.     background-position:center center;
  26.     content:"";
  27.     width:20px;
  28.     height:20px;
  29.     position:absolute;
  30.     right:15px;
  31.     top:50%;
  32.     margin-top:-9px;
  33.     border-radius: 50%;
  34.     box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
  35. }
  36.  
  37. .a_demo_four:active::before {
  38.     top:50%;
  39.     margin-top:-12px;
  40.     box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
  41. }

样式五：3D风格4

cscss3 button样式五

CSS:

  1. .a_demo_five {
  2.     background-color:#9827d3;
  3.     width:150px;
  4.     display:inline-block;
  5.     font-family: 'Open Sans', sans-serif;
  6.     font-size:12px;
  7.     text-decoration:none;
  8.     color:#fff;
  9.     position:relative;
  10.     margin-top:40px;
  11.     padding-bottom:10px;
  12.     padding-top:10px;
  13.     background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%);
  14.     border-bottom-right-radius: 5px;
  15.     border-bottom-left-radius: 5px;
  16.     box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999;
  17. }
  18.  
  19. .a_demo_five:active {
  20.     top:3px;
  21.     background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%);
  22.     box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999;
  23. }
  24.  
  25. .a_demo_five::before {
  26.     background-color:#fff;
  27.     background-image:url(../images/heart.gif);
  28.     background-repeat:no-repeat;
  29.     background-position:center center;
  30.     border-left:solid 1px #CCC;
  31.     border-top:solid 1px #CCC;
  32.     border-right:solid 1px #CCC;
  33.     content:"";
  34.     width:148px;
  35.     height:40px;
  36.     position:absolute;
  37.     top:-30px;
  38.     left:0px;
  39.     margin-top:-11px;
  40.     z-index:-1;
  41.     border-top-left-radius: 5px;
  42.     border-top-right-radius: 5px;
  43. }
  44.  
  45. .a_demo_five:active::before {
  46.     top: -33px;
  47.     box-shadow: 0px 3px 0px #ccc;
  48. }

结尾：

因为这些Button只是实验性质的，并不是所有浏览器很好的支持它们。希望能给你带去一些灵感。

 

英文原文链接：CSS BUTTONS WITH PSEUDO-ELEMENTS

 
 
响应式多级菜单
 
 
使用CSS3 PIE让IE6-8正确的显示圆角


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>