Разработка Светящиеся кнопки для сайта

[baltun]

baltun разместил(а) новый ресурс:

Светящиеся кнопки для сайта - Светящиеся кнопки для сайта.

Пишем HTML:

<a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>

Пишем наш стиль:

@import...

Посмотреть страницу этого ресурса...

 

[Admin_Admin]

Не получается

 

[hacker]

Не получается

Что не получается?

 

[baltun]

Что не получается?

Думаю не получается реализовать такое на форуме к кой нибудь кнопке, полагаю такое без модификации в любом случае на одном css не получится.

 

[hacker]

В шаблон extra.less вставить код:

/** Анимация сообщений и уведомлений для Xenforo 2 */
[CODE=css]
@keyframes xgtbell {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(30deg);
    }
    20% {
        transform: rotate(0);
    }
    80% {
        transform: rotate(0);
    }
    90% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0);
    }
}
@-webkit-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
.js-badge--alerts.badgeContainer--highlighted {
    i {
        &:after {
            animation: xgtbell 1s 1s both infinite;
        }
    }
    border: none;
    box-shadow: 0 0 0 0 rgba(225, 228, 227, 0.7);
    border-radius: 10%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes xgtbell {

    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(30deg);
    }

    20% {
        transform: rotate(0);
    }

    80% {
        transform: rotate(0);
    }

    90% {
        transform: rotate(-30deg);
    }

    100% {
        transform: rotate(0);
    }

}

@-webkit-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}

@keyframes xgtNotificationAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}

.badgeContainer--highlighted {
    i {
        &:after {
            animation: xgtbell 1s 1s both infinite;
        }

    }

    border: none;
    box-shadow: 0 0 0 0 rgba(225, 228, 227, 0.7);
    border-radius: 10%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes xgtDM {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(30deg);
    }
    20% {
        transform: rotate(0);
    }
    80% {
        transform: rotate(0);
    }
    90% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0);
    }
}
@-webkit-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
.js-badge--conversations.badgeContainer--highlighted {
    i {
        &:after {
            animation: xgtDM 1s 1s both infinite;
        }
    }
    border: none;
    box-shadow: 0 0 0 0 rgba(225, 228, 227, 0.7);
    border-radius: 10%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: xgtConversationsAnim 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
/*****************************************************************************************************************/

Вывод кода: