摘要：動(dòng)效按鈕代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁面上常見功能實(shí)現(xiàn)的具體實(shí)例。

代碼儲(chǔ)存在Github
效果預(yù)覽

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

效果預(yù)覽

創(chuàng)建按鈕

    

        
立體特效
        Click    
    
    

        
懸停特效
        Hover    
    
    

        
漣漪特效
        Click    
    

設(shè)置.button樣式

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

為每個(gè)按鈕多帶帶設(shè)置樣式

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

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

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

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

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

.arrow span:after {
  content: "