今天要为各网友再带来一款css实现的鼠标经过按钮的特效。按钮初始时，边框为断开的按钮，当鼠标经过按钮时动画变为封闭的边框。效果图如下：

在线预览   源码下载

我们一起看下实现的代码：

html代码：

<body>

    <a target="_blank" class="btn-edge" href="http://www.w2bc.com/shili">Hover Me</a>

</body>

css代码：

*, *:before, *:after

        {

            margin:;

            padding:;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

        }

        body

        {

            padding-top: 10%;

            text-align: center;

            overflow-x: hidden;

        }

        .btn-edge

        {

            position: relative;

            display: inline-block;

            padding: 1rem 2rem;

            font-family: 'Titillium Web' , sans-serif;

            font-weight:;

            text-decoration: none;

            font-size: 3rem;

            color: #333;

            background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333));

            background-image: -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333);

            background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);

            background-repeat: no-repeat;

            -webkit-background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem;

            background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem;

            background-position: 0 0, 100% 0, 0 100%, 100% 100%;

            -webkit-box-shadow: inset 0 0 0 5px rgba(255, 99, 71, 0);

            box-shadow: inset 0 0 0 5px rgba(255, 99, 71, 0);

            -webkit-transition: background-size 1s .4s, -webkit-box-shadow .4s, color .4s;

            transition: background-size 1s .4s, box-shadow .4s, color .4s;

            -webkit-transform: translateZ(0);

            transform: translateZ(0);

        }

        .btn-edge:hover

        {

            color: tomato;

            -webkit-background-size: 100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%;

            background-size: 100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%;

            -webkit-box-shadow: inset 0 0 0 5px tomato;

            box-shadow: inset 0 0 0 5px tomato;

            -webkit-transition: background-size 1s, -webkit-box-shadow .4s .6s, color .4s .6s;

            transition: background-size 1s, box-shadow .4s .6s, color .4s .6s;

        }

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/6366

css3实现的鼠标经过按钮特效的更多相关文章

  1. 一款纯css3实现的鼠标经过按钮特效

    今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div align=&qu ...

  2. CSS3制作的一款按钮特效

    /*.btn { width:230px; height:70px; font-size:70px; font-weight:bold; overflow:hidden; font: "He ...

  3. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  4. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  5. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  6. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  7. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  8. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 纯css3实现的鼠标悬停动画按钮

    今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

随机推荐

  1. 微信小程序-基于canvas画画涂鸦

    代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. 使用canvas制作一个移动端画板

    概述 使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用 详细 代码下载:http://www.demodashi.com/demo/10503.h ...

  3. Uri编码，包括javascript前端与C#服务器端

    URI编码的方法汇总 javascript中的编码有三种方法:escape.encodeURI.encodeURIComponent C#中编码的主要方法:HttpUtility.UrlEncode. ...

  4. 使用select函数改进客户端/服务器端程序

    一.当我们使用单进程单连接且使用readline修改后的客户端程序,去连接使用readline修改后的服务器端程序,会出现一个有趣的现象,先来看输出: 先运行服务器端,再运行客户端, simba@ub ...

  5. Shell中重定向&lt;&lt;EOF注意事项

    作者:iamlaosong 我们常常在shell脚本程序中用<<EOF重定向输入.将我们输入的命令字符串作为一个运行程序的输入,这样,我们就不须要在那个程序环境中手工输入命令,以便自己主动 ...

  6. C++ 设计模式 —— 訪问者（Visitor）

    訪问者设计模式的实现借助于两个继承体系, (1)elements:一个是被操作的类(基类及其子类) (2)visitors:一个定义了一系列操作的訪问者(基类及其子类) 訪问者模式是一种行为型设计模式 ...

  7. Leet Code -- Unique BST

    对于数字n(大于1).从1到n有多少种binary search tree(BST序列)?当n=3时,BST序列为: 1         3     3    2     1     \       ...

  8. Python2 cmp() 函数

    描述 cmp(x,y) 函数用于比较2个对象,如果 x < y 返回 -1, 如果 x == y 返回 0, 如果 x > y 返回 1. 语法 以下是 cmp() 方法的语法: cmp( ...

  9. spring3.0.6+hibernate3升级spring4.1.6+hibernate4.3遇到的问题

    1.下面这三个包,在hibernate4中已经废弃了,因为都直接用session来进行很好的事务管理 import org.springframework.orm.hibernate3.Hiberna ...

  10. Spring AOP之Introduction(@DeclareParents)简介（转）

    Spring的文档上对Introduction这个概念和相关的注解@DeclareParents作了如下介绍: Introductions (known as inter-type declarati ...