1、新建html文档。
2、书写hmtl代码。<div class="block__cell"> <a href="#" class="btn btn--activate" id="btnActivation"> <span class="btn__icon"></span> <span class="btn__text" data-wait="Waiting" data-after="Activated">Activate</span> </a> </div>
3、书写css代码。<style>* { box-sizing: border-box; }html { display: table; height: 100%; width: 100%; margin: 0; padding: 0; background-color: #282828; }.block { display: table; height: 100%; width: 100%; margin: 0; padding: 0; text-align: center; font-family: 'Roboto', sans-serif; }.block__cell { padding-left: 200px; padding-top: 200px; display: table-cell; vertical-align: middle; }.btn { text-decoration: none; line-height: 46px; padding: 0 30px 0 55px; position: relative; text-align: center; display: inline-block; background-color: #319bef; color: #fff; font-weight: 500; border-radius: 23px; font-size: 16px; transition: all 0.5s linear; -o-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s ease; overflow: hidden; }.btn__icon { width: 24px; height: 24px; background-color: #fff; border: 0px solid #319bef; border-radius: 50%; display: inline-block; top: 11px; position: absolute; left: 20px; }.btn .btn__icon:before { content: ''; left: 0px; top: 0px; position: absolute; transition: all 0.3s linear; -o-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s ease; }.btn--activate .btn__icon:before { width: 24px; height: 24px; background-repeat: no-repeat; background-size: 10px; background-position-x: center; background-position-y: center; }.btn .btn__icon:after { content: ''; top: 0px; left: 0px; position: absolute; transition: all 0.3s linear; -o-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; }.btn--activate .btn__icon:after { width: 24px; height: 24px; background-repeat: no-repeat; background-size: 8px; background-position-x: center; background-position-y: 34px; }.btn--activate:hover { background-color: #2f89d1; }.btn--activate:hover .btn__icon { border-color: #2f89d1; }.btn--activate:hover .btn__icon:before { background-position-y: -34px; }.btn--activate:hover .btn__icon:after { background-position-y: center; }.btn--waiting { background-color: #2f89d1; }.btn--waiting .btn__icon { background-color: transparent; }.btn--waiting .btn__icon:after { width: 20px; height: 20px; top: 0px; left: 0px; border-radius: 50%; animation: rotation infinite linear 0.5s; transition: none; border-top: 2px solid transparent; border-left: 2px solid #fff; border-right: 2px solid transparent; border-bottom: 2px solid transparent; z-index: 0; }.btn--activated { background-color: #44cc71; }.btn--activated .btn__icon:after { width: 24px; height: 24px; background-size: 10px; background-repeat: no-repeat; background-position-x: center; background-position-y: center; animation: activated 0.3s linear 1; }.btn__text { position: relative; }.btn__text:before { content: attr(data-after); position: absolute; top: -27px; color: transparent; z-index: -1; color: #fff; transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; }.btn__text:after { content: attr(data-wait); position: absolute; color: transparent; top: 2px; left: 0; z-index: -1; color: #fff; transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; }.btn--waiting .btn__text { color: transparent; }.btn--waiting .btn__text:after { top: -13px; z-index: 1; }.btn--activated .btn__text:before { top: -13px; z-index: 1; }.btn--activated .btn__text { color: transparent; }@keyframes rotation { 0% {transform: rotateZ(0deg);}100% {transform: rotateZ(360deg);}}@keyframes activated { 0% {background-position-y: 34px;}100% {background-position-y: center;}}</style>
4、书写并添加js代码。<script src="js/jquery.min.js"></script><script>$(document).ready(function(){ $('#btnActivation').click(function(){ if(!$('#btnActivation').hasClass(('btn--activated'))){ $('#btnActivation').removeClass('btn--activate'); $('#btnActivation').addClass('btn--waiting'); setTimeout(function(){ removeWaiting(); }, 3000); } }); function removeWaiting(){ $('#btnActivation').removeClass('btn--waiting'); $('#btnActivation').addClass('btn--activated'); }});</script>
5、代码整体结构。
6、查看效果。
