.wolfo-button.btn-link {
    &[class*='size-'] {
        border: 0;
        background: none;

        a {
            line-height: normal;
            min-height: auto;
            padding: 0;
            background: none;
        }
    }

    &:hover {
        text-decoration: none;
    }

    &.btn-effect-1 {
        a {
            color: $primary_color;
            @include transition(all .4s, color 0s);

            span {
                position: relative;
                top: 0;
                @include transition(all .4s);
            }
        }

        .btn-line {
            display: inline-block;
            width: 0;
            height: 2px;
            background: $hover_color;
            @extend %text-opacity-hiden;
            @include transition(all .4s);
            @include position(absolute, auto, 0, 0, null);
        }

        &:hover {
            a {
                color: $hover_color;

                span:not(.btn-line) {
                    top: -5px;
                }
            }

            .btn-line {
                width: 100%;
                left: 0;
                right: auto;
                @extend %text-opacity-show;
            }
        }
    }

    &.btn-effect-2 {
        position: relative;

        .btn-line-af {
            content: '';
            height: 2px;
            background: $primary_color;
            @include position(absolute, null, 0, 0, 0);
            @include transform-origin(left);
            @include transition(transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s);
        }

        a {
            color: $primary_color;
            @include position(relative, 0);
            @include transition(all .4s, color 0s);

            > .btn-line {
                background: $primary_color;
                position: absolute;
            }

            > .bottom {
                width: 2px;
                bottom: 0;
                top: 0;
                right: 0;
                @include transform(scale3d(1, 0, 1));
                @include transform-origin(top);
                @include transition(transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s);
            }

            > .top {
                height: 2px;
                left: 0;
                right: 0;
                top: 0;
                @include transform(scale3d(0, 1, 1));
                @include transform-origin(left);
                @include transition(transform 0.08s linear 0.43s);
            }
        }

        .link-name {
            .btn-line {
                background: $primary_color;
                position: absolute;
            }

            .bottom {
                width: 2px;
                bottom: 0;
                top: 0;
                left: 0;
                @include transform(scale3d(1, 0, 1));
                @include transform-origin(bottom);
                @include transition(transform 0.08s linear 0.51s);
            }

            .top {
                height: 2px;
                left: 0;
                right: 0;
                bottom: 0;
                @include transform(scale3d(0, 1, 1));
                @include transform-origin(right);
                @include transition(transform 0.3s cubic-bezier(1, 0, 0.65, 1.01));
            }
        }

        &:hover {
            .btn-line-af {
                @include transform(scale3d(0, 1, 1));
                @include transform-origin(right);
                @include transition(transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s);
            }

            .btn-line {
                background: $hover_color;
                @include transform(scale3d(1, 1, 1));
            }

            a {
                top: -10px;
                padding: rem(10px);
                margin: rem(-10px);
                color: $hover_color;

                > .bottom {
                    @include transform-origin(bottom);
                    @include transition(transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s);
                }

                > .top {
                    @include transform-origin(right);
                    @include transition(transform 0.08s linear 0.4s);
                }
            }

            .link-name {
                .bottom {
                    @include transform-origin(top);
                    @include transition(transform 0.08s linear 0.48s);
                }

                .top {
                    @include transform-origin(left);
                    @include transition(transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s);
                }
            }
        }
    }

    &.btn-effect-3 a {
        color: $primary_color;

        &:after {
            content: '\eb23';
            font-family: $icon_font;
            font-size: rem(20px);
            margin-left: rem(5px);
            @include transition(all .4s, color 0s);
        }

        &:hover {
            color: $hover_color;

            &:after {
                margin-left: rem(10px);
            }
        }
    }
}

.wolfo-button-sc.btn-link {
    &:hover {
        a {
            color: var(--link-hover-tag-a-color) !important;
        }
    }
}