我们将要达到的是如下的效果(若效果未出现请刷新)：

分析

主要还是运用CSS3的transition, animation, transform还有渐变背景等特性。

  • 由于按钮在鼠标进入时有不同的样式，所以要对其:hover状态运用另外的背景样式
  • 通过对按钮的:after状态添加一个内容为空的元素，并给其一个边框，这样在鼠标进入后我们让这个隐藏的空元素变大直到淡出，就得到我们看到的效果了

构建基本按钮样式

做为例子，我们的页面会很简单，就放一个a标签作为按钮，然后对其写样式让它看起来更像一个按钮。并定义好:after元素。

<style type="text/css">

    .button{

	cursor: pointer;

	text-decoration: none;

	padding: 10px;

	color: #fff;

	border-radius: 10px;

	position: absolute;

	top: 100px;

	left: %;

	background: linear-gradient(#93c, #50c);

	border:1px solid purple;

    }

    .button:after{

	content: "";

	position: absolute;

	top: ;

	left: ;

	width: %;

	height: %;

	border-radius: 10px;

	opacity: ;

	border:1px solid purple;

    }

    .button:hover{

    	background: linear-gradient(#b5e, #93c);

    }

</style>

<body>

    <a class="button" href="javascript:void(0);" >Fake Button</a>

</body>

添加动画

首先用keyframes定义动画

@-webkit-keyframes boom {

	0% {

		opacity:

	}

	5% {

		opacity:

	}

	100% {

		-webkit-transform: scale(.);

		transform: scale(.);

		opacity:

	}

}

@keyframes boom {

	0% {

		opacity:

	}

	5% {

		opacity:

	}

	100% {

		transform: scale(.);

		transform: scale(.);

		opacity:

	}

}

再将其运用到按钮后面隐藏的元素上

 .button:hover:after {

     -webkit-animation: boom 0.5s ease;

     animation: boom 0.5s ease;

}

扩展

另外，我还发现一个jQuery插件jQuery.twinkle专门做这样的效果，因为是通过js做的，所以原理跟上面的完全不一样，但这个插件提供的效果丰富，且很炫很有创意，大家可以去欣赏下。下面是一个效果的截图。

代码下载

度娘盘：http://pan.baidu.com/s/1kT7c8gJ

REFERENCE

  1. A working button on CodePen: https://codepen.io/signup/plans/
  2. A collection of the shining effect by using a jQuery plugin : http://larsjung.de/twinkle/
  3. jQuery twinkle plugin: http://larsjung.de/twinkle/

CSS3 制作一个边框向周围散开的按钮效果的更多相关文章

  1. 一个类似抖音 APP 拍摄按钮效果的控件

    TouchButton 一个类似抖音 APP 拍摄按钮效果的控件 效果图预览 用法 <net.angrycode.library.TouchButton android:id="@+i ...

  2. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...

  3. 使用CSS3 制作一个material-design 风格登录界面

    心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...

  4. css3制作一个漂亮的按钮

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69

  5. css3 制作一个遮罩

    思路:1.显示两块图片,2.图片区域(初始隐藏),3.鼠标移入,遮罩显示,此时遮住图片,4.鼠标移出,遮罩恢复初始状态 用到两个css3 属性:transtion ,transform 用法: 1. ...

  6. 使用CSS3制作72个webapp图标

    前言 移动网络带宽的快慢直接影响webapp应用体验效果的优差,其中加载图片是很耗流量的,所以对这一方面的性能优化是很需要的.一般对于那些小而多的图片(图标)都会采用sprite合并成一张图片来减少h ...

  7. 制作图片边框：《CSS3 Border-image》

    一个边框图片border-image

  8. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  9. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

随机推荐

  1. 利用C# Winform做Windows系统任务栏

    最近公司做一个考试系统,需要一个答题栏,要求:占用屏幕上方一部分区域,而且始终置顶,当其他窗口最大化时"答题栏"始终置前并且不遮挡最大化窗口的任何部分!就像windows任务栏一样 ...

  2. 详解Eclipse断点

    原文链接:http://www.blogjava.net/jiangshachina/archive/2011/11/20/364367.html 大家肯定都用过Eclipse的调试的功能,在调试的过 ...

  3. [算法总结]three-way partition

    procedure three-way-partition(A : array of values, mid : value): i ← 0 j ← 0 n ← size of A - 1 while ...

  4. CentOS安装JDK和安装Glassfish

    1.首先下载对应CentOS版本的jdk:下载:jdk-7u75-linux-x64.tar.gz 2.下载该jdk到本地,并上传到CentOS系统的opt临时目录下 3.在安装自己下载的jdk之前, ...

  5. Map排序

    HashMap: 最常用的Map,它根据键的HashCode 值存储数据,根据键可以直接获取它的值,具有很快的访问速度.HashMap最多只允许一条记录的键为Null(多条会覆盖);允许多条记录的值为 ...

  6. Spring 使用 SLF4J代替 Commons Logging 写日志 异常

    项目的日志更换成slf4j和logback后,发现项目无法启动.错误提示 Caused by: java.lang.NoClassDefFoundError: Lorg/apache/commons/ ...

  7. Python 进程间通信

    from multiprocessing import Process,Queue import os,time,random def write(q): print('Process to writ ...

  8. HTML5 与 CSS3 jQuery部分知识总结【转】

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  9. JS写入日志

    try { var WSShell = WScript.CreateObject("WScript.Shell"); var FileSys = WScript.CreateObj ...

  10. 谈 CSS 模块化

    以前看过模块化的相关资料以及解释,对模块化有了一个表皮的了解,自己也做了一些相关的实践,由于接触到的项目交小,所以也没能更好的去体现和理解模块化,但总体还是有那么一些感悟,但是如果要说怎么才能算是好的 ...