给网页中的button加动画效果

网页中的很多事件交互都是通过点击页面中的按钮来实现的，给按钮加一点动画效果也会让网页看起来生动一些，以下就是一个简单的例子：

此按钮的动画主要是通过css的transform动画，伪元素，伪类来实现；

第一步：按钮的html(此处按钮设为a元素)

<a href="#" class=""btn btn-white>discover</a>

第二步：编写按钮的css样式

按钮的基本样式

.btn:visited{
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 40px;
	display: inline-block;
	margin-top: 30px;
	border-radius: 100px;
	transition: all .2s;
	position: relative;
	animation: moveInBottom 1s 0.75s;
	animation-fill-mode: backwards;   	  
}
.btn-white{
    background-color:#fff;
    color:#777;
}```

按钮当鼠标悬浮时的状态：
```.btn:hover{
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}```

当按钮点击时的状态：
```.btn:active{
	transform: translateY(-1px);
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}```

添加btn的伪元素，实现鼠标悬浮时，背景扩大消失的效果：
```.btn::after{
	content: '';
	display: inline-block;
	height: 100%;
	 100%;
	border-radius: 100px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transition: all .4s ;
}
.btn-white::after{
	background:#fff;
}
.btn:hover::after{
	transform: scaleX(1.4) scaleY(1.6);
	opacity: 0;
}```

```@keyframes moveInBottom{
	0%{
    	    opacity: 0;
    	    transform: translateY(100px);
	}
	100%{
		opacity: 1;
		transform: translate(0);
	}
}```