Для того, чтобы сделать сияющую кнопку на 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
Подробнее...