6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:34:34
Original
1211 people have browsed it

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

在线预览    源码下载

 使用方法

 HTML结构

该CSS3按钮边框动画特效中的按钮使用HTML的

<button class="draw">draw</button>       
Copy after login

CSS样式

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

button {  background: none;  border: 0;  box-sizing: border-box;  box-shadow: inset 0 0 0 2px #f45e61;  color: #f45e61;  font-size: inherit;  font-weight: 700;  margin: 1em;  padding: 1em 2em;  text-align: center;  text-transform: capitalize;  position: relative;  vertical-align: middle;}button::before, button::after {  box-sizing: border-box;  content: '';  position: absolute;  width: 100%;  height: 100%;}            
Copy after login

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template