Tom特效之多功能提交按鈕
話說提交按鈕可能是我們工作生活中最常見的東西了，比如我現在在寫這篇文章，下面就有一個大大的按鈕，甭管上面寫的什麼文字，我知道點了那個按鈕，我這篇文章就算是發出去了。所以按鈕的作用可見一斑。
但是一般的按鈕是很難滿足我們所有的需求的，或者說很難滿足使用者的心理預期的。
從設計的角度出發，按鈕應該至少存在五中狀態：預設狀態，懸停狀態，點選狀態，選中狀態以及禁用狀態。不過我們平常很難見到這樣的按鈕，能有三個狀態已經是很難得了
另外從使用者體驗角度出發，按鈕應該滿足這三個功能：操作之前可預知，操作之中有反饋，操作之後可撤銷。由此可見，要做一個按鈕還真不是一件簡單的事情。不過我們應該要朝著這個方向去努力。
那麼今天給大家帶來的這一款按鈕呢，我覺得是按鈕的一點小小的進步，先來看看效果吧：
在點選之前感覺和普通的按鈕也沒啥區別。不過點選之後就有點意思了，先是按鈕縮短，縮成一個圓，然後一個圓形的載入進度，進度條可是21世紀最偉大的發明哦！載入完成了之後再顯示一個成功的狀態。
如果說我們把中間的過程再加一些功能的話滿足前面提到的條件其實是沒有問題的。
那麼這麼一個按鈕我們來看看是如何來實現的呢：先把它拆了，一個東西只有把它拆開，我們才能知道它裡面的原理：
拆開了之後就能看得很清楚了，畫面分成了三層，分別是背景，按鈕和進度條。所以說我們看到的進度條其實是一開始就放在那個位置了的，只是當我們點選之後才顯示出來而已。所以說整個效果大致可以分成三部分：
- 1，點選之後按鈕縮短
- 2，進度條
- 3，進度條走完之後顯示成功狀態
其實在這裡面難點估計就是進度條的問題了，這裡是用純css畫的圓環進度條哦，所以對大家css的基礎要求可能要稍微高一點，然後這裡面用到的知識點呢有這麼些：
1,transform css變換（這裡主要用到rotate旋轉函式）
2,transition, transition-delay
3,border-radius
4,:focus偽類 “~”毗鄰元素選擇器然後效果具體的實現過程的話呢在這裡就說不清楚了，篇幅太長。所以我給大家準備好了實現的視訊以及原始碼，大家關注我的公眾號，在裡面回覆“Tom特效”就能免費獲取啦！
