示例

這里是一個 Demo.

現(xiàn)在開始吧...

準備材料

1. 編輯器：sublime text3，隨自己喜歡~
2. 谷歌瀏覽器： chrome，不是IE都好說_{，Edge也是可以的}

html代碼

<pre><code>

<div class="container">   //這是一個大容器，里面可以放很多的div.col
    <div class="col">   //這是橫向整列的一個容器
        <div class="choice">    //這才是按鈕本身
            <a href="#" class="button" id="button">
                <span class="icon"></span>
            </a>
        </div>
    </div>
</div>```
</code></pre>

####css代碼
>body,html{
    background-color: #eee;
    margin: 0;
    padding: 0;
}  
header{
    width: 100%;
    height: 150px;
    background-color: #2A324B;
}
.container{
    width: 960px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px 0;
}
.col{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 20px 0;
    padding: 50px 0;
    background-color: #2A324B;
}
.choice{
    width: 150px;
    height: 50px;
    border-radius: 25px;
    margin: 0 auto;
    position: relative;
    border:2px solid #fff;
    background-color: #0096cf;
    text-align: center;
    line-height: 50px;
    font-size: 26px;
    color: #fff;
}
.button{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #00A8E8;
    /* #d9534f;*/
    display: block;
    box-shadow: 2px 3px 8px rgba(0,0,0,.7);
    transition: all 0.5s;
    text-align: center;
    margin-top: 0;
    position: absolute;
    top: 0
}
.icon{  
    width: 0;height: 0;
    position: absolute;
    margin: 22px -13px;
}
.icon:before{
    content: '';
    width: 19px;
    height: 3px;
    background-color: #fff;
    display: block;
    position: absolute;
    -webkit-transform: translate(-50%, 5px) rotate(40deg);
              transform: translate(-50%, 5px) rotate(40deg);
    border-radius: 3px;
    transition:  all .5s;
}
.icon:after{
    content: '';
    width: 3px;
    height: 33px;
    background-color: #fff;
    display: block;
    position: absolute;
    -webkit-transform: translate(16px, -15px) rotate(45deg);
              transform: translate(16px, -15px) rotate(45deg);
    border-radius: 3px;
    transition:  all .5s;
}
.choice.active .button{
    margin-left: 100px;
    box-shadow: -2px 3px 8px rgba(0,0,0,.7);
}
.choice.active .icon:before{
    width: 33px;
    height: 3px;
    -webkit-transform: translate(-5px, 3px) rotate(45deg);
              transform: translate(-5px, 3px) rotate(45deg);
}
.choice.active .icon:after{
    width: 3px;
    height: 33px;
    -webkit-transform: translate(10px, -12px) rotate(45deg);
              transform: translate(10px, -12px) rotate(45deg);
}


####然后你就可以在瀏覽器中看見


![right.png](http://upload-images.jianshu.io/upload_images/1116060-92ea9104a03819bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####接下來我們給他把效果加上去
<pre><code>

<script src="js/jquery.min.js"></script> //這里我引用了jquery，要換成自己的路徑哦~
<script>
$("#button").click(function(){//按鈕點擊的時候觸發(fā)事件
$(".choice").toggleClass("active"); //toggleClass函數(shù)的作用是，添加或移除active，
//有就移除，沒有就添加。
})
</script>
```

</code></pre>

刷新頁面，然后我們點擊按鈕就會得到...

error.png

而且他在變換時候的效果也是漸變過來的喲,怎么樣，是不是比用替換圖片完成效果好多了呢？
這里的代碼還有很多沒有優(yōu)化的地方，就交給你們自己完成啦~