Radial animation button

index.html

<!-- no-animation class is required -->
<!-- set data-circle with a value for either a complete or half animation: -->
<!-- 1 - for complete -->
<!-- 0 - for half -->

<a class="button-circle no-animation" data-circle="1" href="#">1</a>

mixin.scss

// transform mixins just adds browser specific prefixes, can be replaced with normal transform if needed

@mixin button-circle(
    $width,
    $height,
    $border-width,
    $border-placeholder-color,
    $border-color,
    $background-color
) {
    position: relative;
    display: inline-block;
    width: $width;
    height: $height;
    overflow: hidden;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: $height;

    .button-circle__placeholder {
        position: relative;
        z-index: 2;
    }

    .button-circle__shape {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-color: $border-placeholder-color;
        border-radius: 100%;
        @include transform(rotate(180deg) scaleX(-1));
    }

    &.animation-back .button-circle__shape {
        @include transform(rotate(180deg) scaleX(1));
    }

    .button-circle__shape:after {
        content: '';
        position: absolute;
        top: $border-width;
        left: $border-width;
        width: $width - $border-width * 2;
        height: $height - $border-width * 2;
        border-radius: 100%;
        background-color: $background-color;
    }

    .button-circle__shape span {
        position: absolute;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }

    .button-circle__item {
        position: absolute;
        border-radius: 999px;
        width: 100%;
        height: 100%;
        background-color: $border-color;
        transition: transform .25s linear;
    }

    .button-circle__shape-first {
        left: 0;
    }

    .button-circle__shape-second {
        left: 50%;
    }

    .button-circle__shape-first .button-circle__item {
        left: 100%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        transform-origin: 0 50%;
        transition: transform .5s ease-out;
    }

    .button-circle__shape-second .button-circle__item {
        left: -100%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        transform-origin: 100% 50%;
        transition: transform .25s linear;
    }

    &.animation .button-circle__shape-first .button-circle__item {
        @include transform(rotate(-180deg));
        transition-delay: .25s;
    }

    &.animation .button-circle__shape-second .button-circle__item {
        @include transform(rotate(-180deg));
    }

    &.animation-back .button-circle__shape-first .button-circle__item {
        transition: transform .25s linear;
        transition-delay: 0s;
        @include transform(rotate(0));
    }

    &.animation-back .button-circle__shape-second .button-circle__item {
        @include transform(rotate(0));
        transition-delay: 0.25s;
    }
}

scripts.js

$('[data-circle]').each(function () {
    $(this).html('<span class="button-circle__placeholder">' + $(this).html() + '</span>' +
        '<span class="button-circle__shape"><span class="button-circle__shape-first"><i class="button-circle__item"></i></span>' +
        '<span class="button-circle__shape-second"><i class="button-circle__item"></i></span></span>');

    $(this).mouseenter(function (e, param) {
        if (!$(this).hasClass('no-animation')) {
            return;
        }

        if (param) {
            $(this).addClass('complete');
        }

        $(this)
            .removeClass('no-animation')
            .addClass('animation');

        var count = 0;

        $(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
            function () {
                if ($(this).data('circle') === 0 && !$(this).hasClass('complete')) {
                    return;
                }

                if (count === 1) {
                    $(this).addClass('animation-back');
                }

                count++;

                if (count === 4) {
                    $(this).addClass('no-animation')
                        .removeClass('animation')
                        .removeClass('animation-back')
                        .removeClass('complete');

                    count = 0;
                }
            });
    });
});

// trigger animation with js if needed
// optional param is there if you need the complete animation
// true for complete
// false for half

setTimeout(function () {
    $('[data-circle]').trigger('mouseenter', true);
}, 100);

styles.scss

.button-circle {
    @include button-circle(60px, 60px, 5px, gray, black, white);
}

.no-animation .button-circle__item {
    transition: none !important;
}