1 1 1 1 1 1 1 1 1 1 Rating 2.63 (8 Votes)

Для того, чтобы сделать сияющую кнопку на CSS, вам понадобится обычная кнопка.

На Bootstrap это обычная ссылка с классом btn и, возможно, дополнительными классами, отвечающими за ее вид и размер:

<a class="btn btn-primary btn-lg" role="button" href="#callbackwidget">Перезвоните мне!</a>

Прописываем у ссылки еще один класс, назовем его shine-btn.

Теперь осталось в стилях прописать следующее:

.shine-btn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    -webkit-transition: ease 0.3s;
    transition: ease 0.3s;
}
.shine-btn:after {
    content: "";
    display: block;
    width: 30px;
    height: 300px;
    margin-left: 60px;
    background: #fff;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#b3ffffff',GradientType=0 );
    position: absolute;
    left: -40px;
    top: -150px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-animation-name: slideme;
    animation-name: slideme;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
 
@-webkit-keyframes slideme {
    0% { left: -30px; margin-left: 0px; }
    30% { left: 110%; margin-left: 80px; }
    100% { left: 110%; margin-left: 80px; }
}

Вуаля! Теперь наша кнопка сияет с определенной периодичностью! По слухам, эффект от сияния прибавляет 5-10% к конверсии! Посмотреть результат можно на сайте http://контекстная-реклама-под-ключ.рф/

И никаких лишних скриптов на js!

Свои вопросы задавайте в комментариях!

P.S. Код сияющей кнопки подсмотрен здесь: https://velmaster.ru/blog/11-verstka-html-css/31-knopka-s-animirovannym-blikom-dlya-uvelicheniya-konversii-na-chistom-css

Как фон сайта сделать ссылкой

Узнайте, как выполнить брендирование сайта, сделав фон сайта ссылкой.

Кнопка обратного звонка на сайт (Bootstrap)

Узнайте, как вставить на сайт код кнопки обратного звонка с мерцающей трубкой.

Bootstrap сетка 3 и 4 (скачать psd + руководство для фотошопа)

Узнайте, как настроить сетку для Bootstrap 3 и 4 в фотошопе. Скачать сетку psd для Bootstrap 3 и Bootstrap 4.

Google Fonts и прыгающий текст или, FOUC - как избавиться

Узнайте, почему прыгает текст при подключении шрифтов Google и как от этого избавиться.
Back to Top