Долго искал с дизайнером способ повысить конверсию с формы на одном лендинге. Что-то такое - не раздражающее, но в то же время привлекающее внимание.
Решение оказалось простым и конверсия действительно повысилась на 3%. Ниже код на чистом HTML/CSS.
Вот html кнопка
<a href="#" class="preview-block__btn custom-btn"><span>Кнопка с бликом</span></a>
Ниже её CSS оформление
.preview-block__btn { max-width: 350px; margin-top: 35px; } .custom-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 58px; padding-top: 2px; border: none; border-bottom: 2px solid #beb038; position: relative; font-size: 15px; font-weight: bold; color: #000; text-align: center; text-transform: uppercase; cursor: pointer; overflow: hidden; background: #f3d429; -webkit-transition: ease 0.3s; transition: ease 0.3s; } .custom-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; } }