这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷。
使用方法
HTML结构
该CSS3按钮边框动画特效中的按钮使用HTML的
XML/HTML Code复制内容到剪贴板- <button class="draw">drawbutton>
CSS样式
在CSS样式中,首先为按钮设置一些基本样式,去掉原生按钮的样式。
CSS Code复制内容到剪贴板- 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%;
- }
以上是第一种线条动画效果的制作方法。其它效果的CSS代码请参考下载文件。
本文就为大家介绍到这,希望对大家的学习有所帮助。
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/78246.html