21 種按鈕的 Hover 動態效果（請點擊 view demo 查看）
包含手繪、高速動態、否定、對話框等等
以前很常使用開發者工具檢視及拆解
對於 CSS 的進步相當有幫助
大家也可以試試看喔

CSS【Border 博大精深的秘密】
CSS 最有趣的地方在於立即就能看到效果
許多看似簡單的語法，經過巧妙的搭配就能有豐富的效果
而背後還蘊含著許多視覺邏輯在內
了解以後，會發現這些技巧原來這麼簡單～
本文包含了以下範例：
- 純 CSS 的手繪風格的 Border（可運用於響應式）
- 看了許多次的 Border 三角形運用
- 多層次 Border
- 靈活運用 Border 空間

點讚本粉絲團，每週一篇技術文！（應該啦）
#CSSBorder
#手繪風格

視覺效果就是一種詐欺術
因為網頁在開發時語法本身就有許多限制
所以實際情境都會沒那麼漂亮
如果糾結在程式的邏輯會很難達到一些視覺效果
就像是日蝕的狀態，並非是太陽要有所缺角
只要用另一個球狀物蓋在上方就可以形成日蝕

以前在開發 Flash 的時候就特別有感觸
為什麼其他人的遮色片效果可以做這麼順
透過拆包就可以了解其實手法沒有那麼高端
他只是幾個色塊遮住主要圖案而已
(有開發過的可能理解我的意思 :D)

## 實際案例
下圖的範例也是比較多人問
在多個連結的時候，如果 Hover 到選單下方要增加一個 border 呈現
那麼 border 的空間就可能會造成動態錯位
相信這樣的問題，很多人都有遇過
border 本身就是會產身額外空間
在此就不應該糾結於 "怎麼解決額外多出來的空間"
可以換個詐騙手法 "預先保留多出來的空間" 即可
因此解法就是將 hover 前也補上 透明的 border 就可以囉
以下提供其它額外解法給大家參考
https://codepen.io/Wcc723/pen/mLQjjj

想嘗試不一樣的不一樣的剪輯方式，如果效果不錯的話，會再多做一些
我的頻道就叫戳，所以要講什麼技術的還是看別的影片吧
有想法盡情留言吧

想成為JoJo記得訂閱+FB按讚喔
註:Joe粉就叫JoJo吧
-----------------------------------------------------------------------------------------------------
❤訂閱:https://www.youtube.com/channel/UCA3xGR8Un9yTqewVlBWecvA
✌FB粉絲團:https://www.facebook.com/JoesChannel/
☞Instagram:https://www.instagram.com/joeschannel/

♪Song: Icehunt - Hover (feat. Helen Tess) [NCS Release]
♫Music provided by NoCopyrightSounds.
♪Watch: https://youtu.be/j51Bixo4ZBE
♫Download/Stream: http://ncs.io/HoverCr