XenForo Виджет кнопки регистрации

<xf:css>
    .register-login-btn {
        margin-bottom: 15px;
        text-align: center;
    }
    .register-login-btn .button {
        display: flex;
        width: 200px;
        margin: 5px auto;
        padding: 8px 0;
        text-transform: uppercase;
        font-weight: 600; 
    }
    .register-login-btn .button.register-btn {
        background: rgb(207,0,15);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(144,0,10,.5);
        animation-name: play_down;
        animation-name: play_up;
        animation-duration: 1s;
        animation-iteration-count: infinite; 
    }
    .register-login-btn .button.register-btn:hover {
        background: rgb(175,0,13);
        animation: none;
        box-shadow: none;
    }
    .register-login-btn .login-btn {
        text-transform: uppercase;
        color: rgb(207,0,15);
        font-size: 13px;
        font-weight: 600;
        margin-top: 20px;
    }
    .register-login-btn .login-btn a {
        color: rgb(207,0,15);
    }
    .register-login-btn .login-txt-big {
        color: rgb(207,0,15);
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 600;     
    }
    .register-login-btn .login-txt-small {
        color: rgb(207,0,15);
        text-transform: lowercase;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 20px;     
    }       
    @keyframes  play_up {
        0% {
            box-shadow: 0 0 rgba(144,0,10,.6);
            background: rgba(207,0,15,.5);
        }
        to {
            box-shadow: 0 0 0 20px rgba(144,0,10,0);
            background: rgba(207,0,15,.9);
        } 
    }

    @keyframes  play_down {
        0% {
            box-shadow: 0 0 rgba(55,55,55,.6);
        }
        to {
            box-shadow: 0 0 0 20px rgba(55,55,55,0);
        }
    } 
</xf:css>

<div class="block register-login" {{ widget_data($widget) }}>
    <div class="block-container">
        <div class="block-body block-row">
            <div class="register-login-btn">
                <div class="login-txt-big">
                    {{ $xf.language.language_code == 'ru-RU' ? 'Привет гость!' : 'Hello guest!' }}
                </div>
                <div class="login-txt-small">
                    {{ $xf.language.language_code == 'ru-RU' ? 'Рады видеть на нашем форуме!' : 'Pleased to see you on our forum!' }}
                </div>             
                <xf:button href="{{ link('register') }}"
                           class="register-btn"
                           icon="write"
                           data-xf-click="overlay">
                           {{ phrase('register') }}
                </xf:button>
                <div class="login-btn">
                    {{ $xf.language.language_code == 'ru-RU' ? 'или' : 'or' }} <a href="{{ link('login') }}" data-xf-click="overlay"><xf:fa icon="fa-sign-in" /> {{ phrase('button.login') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>