話說提交按鈕可能是我們工作生活中最常見的東西了，比如我現在在寫這篇文章，下面就有一個大大的按鈕，甭管上面寫的什麼文字，我知道點了那個按鈕，我這篇文章就算是發出去了。所以按鈕的作用可見一斑。
但是一般的按鈕是很難滿足我們所有的需求的，或者說很難滿足使用者的心理預期的。
從設計的角度出發，按鈕應該至少存在五中狀態：預設狀態，懸停狀態，點選狀態，選中狀態以及禁用狀態。不過我們平常很難見到這樣的按鈕，能有三個狀態已經是很難得了
另外從使用者體驗角度出發，按鈕應該滿足這三個功能：操作之前可預知，操作之中有反饋，操作之後可撤銷。由此可見，要做一個按鈕還真不是一件簡單的事情。不過我們應該要朝著這個方向去努力。
那麼今天給大家帶來的這一款按鈕呢，我覺得是按鈕的一點小小的進步，先來看看效果吧
在點選之前感覺和普通的按鈕也沒啥區別。不過點選之後就有點意思了，先是按鈕縮短，縮成一個圓，然後一個圓形的載入進度，進度條可是21世紀最偉大的發明哦！載入完成了之後再顯示一個成功的狀態。
如果說我們把中間的過程再加一些功能的話滿足前面提到的條件其實是沒有問題的。
那麼這麼一個按鈕我們來看看是如何來實現的呢：先把它拆了，一個東西只有把它拆開，我們才能知道它裡面的原理：
1，點選之後按鈕縮短
2，進度條
3，進度條走完之後顯示成功狀態
其實在這裡面難點估計就是進度條的問題了，這裡是用純css畫的圓環進度條哦，所以對大家css的基礎要求可能要稍微高一點，然後這裡面用到的知識點呢有這麼些：
1,transform css變換（這裡主要用到rotate旋轉函式）
2,transition, transition-delay
3,border-radius
4,:focus偽類 “~”毗鄰元素選擇器
複製程式碼以上是我對這個小效果的文字版簡單的介紹，不喜歡看文字的小夥伴們，可以看下方的視訊簡介版哦；
視訊觀看地址：v.qq.com/x/page/e077…
看完視訊介紹版後，你是否對這個效果有思路了呢，如果還不知道從何做起的話，沒關係，那就讓我們繼續看下方的詳細講解實現過程的視訊吧
視訊觀看地址：v.qq.com/x/page/d077…
TOM前端特效-多功能提交按鈕-詳細1
視訊觀看地址：v.qq.com/x/page/f077…
TOM前端特效-多功能提交按鈕-詳細2
由於微信小視訊傳送的限制，最後一集詳解視訊只能發連結啦，大家點選下方連結，就可以繼續觀看：
TOM前端特效-多功能提交按鈕-詳細2 的內容啦~~
訂閱號ID：Miaovclass
關注妙味訂閱號：“妙味前端”，為您帶來優質前端技術乾貨；