当前位置： 移动技术网 > IT编程>网页制作>CSS > 6种非常炫酷的CSS3按钮边框动画特效

6种非常炫酷的CSS3按钮边框动画特效

2019年07月25日  | 移动技术网IT编程  | 我要评论

这是一款效果非常炫酷的css3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候，按钮的边框会以不同的方式进行各种动画，效果非常的炫酷。

   

使用方法 

html结构

该css3按钮边框动画特效中的按钮使用html的<button>元素来制作。各种效果非标设置不同的class。例如第一种效果的class为draw。

xml/html code复制内容到剪贴板
  1. <button class="draw">draw</button>          

css样式

在css样式中，首先为按钮设置一些基本样式，去掉原生按钮的样式。

css code复制内容到剪贴板
  1. button {   
  2.   background: none;   
  3.   border: 0;   
  4.   box-sizing: border-box;   
  5.   box-shadow: inset 0 0 0 2px #f45e61;   
  6.   color: #f45e61;   
  7.   font-size: inherit;   
  8.   font-weight: 700;   
  9.   margin: 1em;   
  10.   padding: 1em 2em;   
  11.   text-align: center;   
  12.   text-transform: capitalize;   
  13.   position: relative;   
  14.   vertical-align: middle;   
  15. }   
  16. button::before, button::after {   
  17.   box-sizing: border-box;   
  18.   content: '';   
  19.   position: absolute;   
  20.   width: 100%;   
  21.   height: 100%;   
  22. }               
  23.   

以上是第一种线条动画效果的制作方法。其它效果的css代码请参考下载文件。

本文就为大家介绍到这，希望对大家的学习有所帮助。

原文：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网