給網頁中的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%;
	width: 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);
	}
}```