给定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设计效果：
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽，造成漏登，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。
