1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div class="container"> <hr> <a href="#" class="btn btn-large btn-success" target="_blank">Fork & Download on GitHub</a> <h2>Examples</h2> <p> The following all have a two second duration: </p> <p class="container"> <button id="loading" class="btn">Loading Spinner</button> <button id="checkMark" class="btn">Success</button> <button id="cross" class="btn">Error</button> </p> <p class="spacer"> </p> <p> It's possible to update a notification when it's already been added: </p> <p class="container"> <button id="loadToSuccess" class="btn">Loading Then Success</button> </p></div>
4、书写css代码。body > div.container { padding: 50px 0; position: relative; }div.container iframe { position: absolute; top: 75px; right: 0; }h2 { margin-top: 40px; font-size: 14px; text-transform: uppercase; }p.spacer { height: 5px; overflow: hidden; }footer { padding: 20px 0; position: relative; }footer iframe { position: absolute; top: 20px; right: 0; }table td:first-child { width: 125px; }li strong { color: #111; }.btn.btn-large { float: right; margin-top: 40px; }
5、代码整体结构。
6、查看效果。
