某天在閒逛網站，美其名觀察各種生態，實則打混摸魚的時候
發現按鈕在 hover 過渡時出現閃爍的狀況
(在一瞬間可以看到背景顏色)

經過研究之後發現是「漸層切換到純色」之間才會產生的狀況

雖然這樣一閃一閃的好像頗帶感的...但貓毛的就是覺得眼睛好痛啊 ‵｡ﾟヽ(ﾟ´Д‵)ﾉﾟ｡

研究之後發現是 transition 所造成的過渡閃爍

如果沒有需要動畫過度效果的話直接拿掉trasition 就不會閃呀閃了，但如果需要的話就會很奇怪...
看起來就是醜阿!醜!!

.s-btn-1{ 
  background: linear-gradient(to left, #8a2387, #e94057, #f27121);
/*   transition: .5s; */
}
.s-btn-1:hover{  
  background: linear-gradient(to left, #8a2387, #8a2387, #8a2387);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transform:translateY(-10%);
}

假如說要有要緩緩上升的感覺，該怎麼辦呢...?(›´ω`‹ )

只好土法煉鋼了!!!

解：純色改成偽漸層... (́◉◞౪◟◉‵)

嘿嘿，這樣看起來就好多了呢~

.s-btn-2{ 
  background: linear-gradient(to left, #3494e6, #3494e6); 
  transition: .5s;
}
.s-btn-2:hover{  
     background: linear-gradient(to left, #3494e6, #ec6ead); 
     box-shadow: 0 2px 10px rgba(0,0,0,0.5);
     transform:translateY(-10%);
}

(巴頭)

老實說，不懂transition之前的我的確是這樣解決的...(遮臉)

懂了transition之後就知道只需要加入

transition: background-image .5s, transform .5s;

就可以解決這個問題啦!

歡迎到codepen這邊感受一下transition的奧妙~
https://codepen.io/SealSeal/pen/PomQZbo