Xem demo Tải về

Chuẩn bị

Để tạo các hiệu ứng cho Icon, bạn cần sử dụng Font Awesome và mo.js. Chèn đoạn mã sau vào trước </head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Mặc dù mo.js hoàn toàn là JavaScript, nhưng để tiện sử dụng, bạn nên dùng thêm jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

HTML

<button class="icobutton">
    <span class="fa fa-thumbs-up"></span>
</button>

CSS

.icobutton {
    font-size: 5em;
    position: relative;
    margin: 0;
    padding: 0;
    color: #c0c1c3;
    border: 0;
    background: none;
    overflow: visible;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.icobutton:hover, .icobutton:focus {
    outline: none;
}

JavaScript (jQuery)

var scaleCurve = mojs.easing.path('M0, 100 L25, 99.9999983 C26.2328835, 75.0708847 19.7847843, 0 100, 0');
var el = document.querySelector('.icobutton'),
elSpan = el.querySelector('span'),
timeline = new mojs.Timeline(),
tween1 = new mojs.Burst({
    parent : el,
    duration : 1500,
    shape : 'circle',
    fill : ['#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE'],
    opacity : 0.6,
    childOptions : {radius : {20 : 0}},
    radius : {40 : 120},
    count : 6,
    isSwirl : true,
    easing : mojs.easing.bezier(0.1, 1, 0.3, 1)
}),
tween2 = new mojs.Transit({
    parent : el,
    duration : 750,
    type : 'circle',
    radius : {0 : 50},
    fill : 'transparent',
    stroke : '#988ADE',
    strokeWidth : {15 : 0},
    opacity : 0.6,
    easing : mojs.easing.bezier(0, 1, 0.5, 1)
}),
tween3 = new mojs.Tween({
    duration : 900,
    onUpdate : function(progress) {
        var scaleProgress = scaleCurve(progress);
        elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ', ' + scaleProgress + ', 1)';
    }
});

timeline.add(tween1, tween2, tween3);

el.addEventListener('click', function() {
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        $(this).css('color', 'rgb(192, 193, 195)');
    } else {
        timeline.replay();
        $(this).addClass('active');
        $(this).css('color', 'rgb(152, 138, 222)');
    }
});

Các bạn có thể tham khảo thêm rất nhiều hiệu ứng khác tại đây. Chúc các bạn thành công!