• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Светящиеся кнопки для сайта

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

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

baltun

Администратор
Сообщения
8.626
Реакции
2.023
Баллы
1.833
baltun разместил(а) новый ресурс:

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

Пишем HTML:
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>
Пишем наш стиль:
CSS:
@import...

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

baltun

Администратор
Сообщения
8.626
Реакции
2.023
Баллы
1.833
Что не получается?
Думаю не получается реализовать такое на форуме к кой нибудь кнопке, полагаю такое без модификации в любом случае на одном css не получится.
 
Последнее редактирование:

hacker

Местный
Сообщения
156
Реакции
104
Баллы
283
В шаблон extra.less вставить код:

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);
}
/*****************************************************************************************************************/
Вывод кода:
 

Вложения

  • Запись экрана 2022-06-29 00:01:17.mp4
    134.5 КБ
Последнее редактирование:
Верх Низ