怎么用CSS3实现按钮边框动画特效

本篇内容主要讲解“怎么用CSS3实现按钮边框动画特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3实现按钮边框动画特效”吧!

这是一款效果非常炫酷的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.   

到此，相信大家对“怎么用CSS3实现按钮边框动画特效”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！