20种炫酷CSS3按钮样式和鼠标滑过特效

这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件。这20组css3按钮每一组都有3种示例,每一个示例都使用CSS3...
这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件。这20组css3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合,相信总有一款适合你。


查看演示

20种炫酷CSS3按钮样式和鼠标滑过特效.zip


该按钮插件中使用鼠标HOVER来作为按钮动画的触发事件,有一些按钮动画效果更适合于鼠标点击事件,这些都可以十分容易修改和实现。


请注意这些按钮动画效果只在最新版本的现代浏览器上工作,(Mobile)Safari浏览器只支持其中很少的效果。


该按钮动画特效中大多数使用的是CSS transitions,但有一些动画效果也使用CSS animations来完成。


使用方法


HTML结构


  1.                
复制代码

通用按钮样式


下面是所有按钮的通用样式:

  1. /* Common button styles */
  2. .button {
  3.   float: left;
  4.   min-width: 150px;
  5.   max-width: 250px;
  6.   display: block;
  7.   margin: 1em;
  8.   padding: 1em 2em;
  9.   border: none;
  10.   background: none;
  11.   color: inherit;
  12.   vertical-align: middle;
  13.   position: relative;
  14.   z-index: 1;
  15. }

  16. .button:focus {
  17.   outline: none;
  18. }

  19. .button > span {
  20.   vertical-align: middle;
  21. }     
复制代码
在某些按钮效果中,在按钮中添加了一些额外的标签例如一个span或几个span。还有一些效果使用了超链接,在这些效果中需要将HTML元素替换为元素,并调整它的样式。

下面是按钮的一些控制样式,如:border、border-radius和尺寸大小。

  1. /* Sizes */
  2. .button--size-s {
  3.   font-size: 14px;
  4. }

  5. .button--size-m {
  6.   font-size: 16px;
  7. }

  8. .button--size-l {
  9.   font-size: 18px;
  10. }

  11. /* Typography and Roundedness */
  12. .button--text-upper {
  13.   letter-spacing: 2px;
  14.   text-transform: uppercase;
  15. }

  16. .button--text-thin {
  17.   font-weight: 300;
  18. }

  19. .button--text-medium {
  20.   font-weight: 500;
  21. }

  22. .button--text-thick {
  23.   font-weight: 600;
  24. }

  25. .button--round-s {
  26.   border-radius: 5px;
  27. }

  28. .button--round-m {
  29.   border-radius: 15px;
  30. }

  31. .button--round-l {
  32.   border-radius: 40px;
  33. }

  34. /* Borders */
  35. .button--border-thin {
  36.   border: 1px solid;
  37. }

  38. .button--border-medium {
  39.   border: 2px solid;
  40. }

  41. .button--border-thick {
  42.   border: 3px solid;
  43. }        
复制代码
注意这些class不是对所有的按钮效果都有意义。有些效果依赖于使用元素的伪元素,例如使用伪元素来制作边框动画。

应用举例

下面来看一个"Itzel"效果的例子:


这个效果在按钮的伪元素上使用clip-path来剪切掉一部分边框,这个效果只能工作在支持clip-path属性的浏览器上,IE浏览器上看不到效果。要在Firefox浏览器中看到效果,需要在HTML中使用SVG来制作clipPath。

在这个效果中,在按钮中有一个裁剪区域,使用伪元素来将之隐藏起来,隐藏的方法是使用transform来将它往下推到按钮的下面,然后在鼠标滑过时使用另外一个transform将它推会原来的位置。因为使用了overflow:hidden,因此在按钮区域外是看不见它的。按钮上的小图标也使用相同的方法来制作。在鼠标滑过的时候,设置文字的透明度为0,以使文字销售,显示出小图标。

  1. /* Itzel */
  2. .button--itzel {
  3.   border: none;
  4.   padding: 0px;
  5.   overflow: hidden;
  6.   width: 255px;
  7. }

  8. .button--itzel::before {
  9.   content: '';
  10.   position: absolute;
  11.   top: 0;
  12.   left: 0;
  13.   width: 100%;
  14.   height: 100%;
  15.   border: 2px solid;
  16.   border-radius: inherit;
  17.   -webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%);
  18.   clip-path: url(../index.html#clipBox);
  19.   transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
  20.   transform-origin: 50% 100%;
  21. }

  22. .button--itzel.button--border-thin::before {
  23.   border: 1px solid;
  24.   transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0);
  25. }

  26. .button--itzel.button--border-thick::before {
  27.   border: 3px solid;
  28.   transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
  29. }

  30. .button--itzel::before,
  31. .button--itzel .button__icon {
  32.   transition: transform 0.3s;
  33.   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  34. }

  35. .button--itzel .button__icon {
  36.   position: absolute;
  37.   top: 100%;
  38.   left: 50%;
  39.   padding: 20px;
  40.   font-size: 20px;
  41.   transform: translate3d(-50%, 0, 0);
  42. }

  43. .button--itzel > span {
  44.   display: block;
  45.   padding: 20px;
  46.   transition: transform 0.3s, opacity 0.3s;
  47.   transition-delay: 0.3s;
  48. }

  49. .button--itzel:hover::before {
  50.   transform: translate3d(0, 0, 0);
  51. }

  52. .button--itzel:hover .button__icon {
  53.   transition-delay: 0.1s;
  54.   transform: translate3d(-50%, -100%, 0);
  55. }

  56. .button--itzel:hover > span {
  57.   opacity: 0;
  58.   transform: translate3d(0, -50%, 0);
  59.   transition-delay: 0s;
  60. }                  
复制代码
以上就是这个按钮效果的全部代码。

在(Mobile) Safari浏览器中,这些按钮动画效果会有许多问题,特别是border-radius和 overflow hidden的问题。在这个浏览器中,伪元素视乎不能解析overflow:hidden(特别是在transition的时候)。还有一个gap问题,解决方案是使用 -webkit-backface-visibility: hidden。

via:http://www.htmleaf.com/css3/css3donghua/201502271429.html