jquery+css3按钮激活状态特效

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、查看效果。