摘要：動效按鈕代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。

代碼儲存在Github
效果預覽

初衷：很多人在初學前端的時候都會問，“如何入門前端？”
同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的 “入門級” 的教材并不太滿意。學習一門新知識，實例是尤其重要的。在這里本人整理了目前頁面上常見功能實現的具體實例。愿能為大家提供一些幫助。
希望能夠與大家互相分享，共同進步。

效果預覽

創建按鈕

    

        
立體特效
        Click    
    
    

        
懸停特效
        Hover    
    
    

        
漣漪特效
        Click    
    

設置.button樣式

/*設置按鈕樣式*/
.button {
  padding: 15px 25px;  
  font-size: 24px; 
  text-align: center; /*內容居中*/
  cursor: pointer;    /*設置光標樣式*/
  outline: none;      /*消除outline*/
  color: #fff;     
  border: none;       /*消除border*/
}

為每個按鈕多帶帶設置樣式

/*立體特效*/
.pressed {
  font-size: 24px; 
  padding: 15px 25px;  
  background-color: #4CAF50;
  border-radius: 15px;      /*設置邊框圓角*/
  box-shadow: 0 5px #999;   /*設置陰影*/
}

.pressed:hover {
  background-color: #3e8e41; /*懸停變背景色*/
}

.pressed:active {
  background-color: #3e8e41;
  box-shadow: 0 2px #666;    /*點擊后陰影變化*/
  transform: translateY(3px);/*點擊后按鈕沿著Y軸位移，位移量等于陰影變化量*/
}

/*懸停出現箭頭特效*/
.arrow {
  font-size: 28px;
  padding: 20px;
  width: 200px;
  border-radius: 4px;
  background-color: #f4511e;
  margin: 5px;
}

.arrow span {  
  position: relative; /*span相對定位，使span:after可以據其進行絕對定位*/
  transition: 0.5s;
}

.arrow span:after {
  content: "