給定HTML如下：
1<a class="button" role="button">
2 <span>刪除</span>
3 <div class="icon">
4 <i class="fa fa-times"></i>
5 <i class="fa fa-check"></i>
6 </div>
7</a>
8
9<!-- 推薦開源CDN來選取需引用的外部JS //-->
10<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
基礎CSS如下：
1@import url('http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');
2
3* {
4 margin: 0;
5 padding: 0;
6 box-sizing: inherit;
7}
8
9*:focus {
10 outline: none;
11}
12
13html {
14 box-sizing: border-box;
15}
16
17body {
18 background-color: #ecf0f1;
19 font-family: 'microsoft yahei',Arial,sans-serif;
20}
請使用CSS和jQuery生成如下的刪除按鈕及其確認效果：
初始按鈕為一個關閉圖標+文字
鼠標懸浮按鈕，橫向動畫切換成一個單獨的大號關閉圖標 （使用font-awesome）
點擊按鈕，按鈕切換為綠色背景的對勾圖標，確認已刪除
點擊按鈕3秒后，自動恢復為初始按鈕狀態
參考以下完整UI設計效果：
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
