Блик в ZERO на Тильда (с вас только кнопка) | Эффекты для кнопок | CSS

preview_player
Показать описание
В этом видео постараемся добавить в Zero блик на кнопки!
С вас нужна только кнопка, так как блик рисуется кодом.

К слову, это CSS-код, поэтому за скорость загрузки сайта можете не переживать✌

КОД В КОММЕНТАХ
Рекомендации по теме
Комментарии
Автор


А вот и сам код:

<!--Блик на кнопке-->

<style>
.ndt_blick_btn {
position: relative;
overflow: hidden;
border-radius: 30px; /* скругление углов кнопки */
}
.ndt_blick_btn::before {
content: '';
width: 20px; /* ширина */
height: 200px; /* высота */
position: absolute;
top: -40px; /* поднять выше */
left: -40px; /* подвинуть левее стартовую позицию */
background-color: #fff; /* цвет блика */
transform: skewX(-30deg); /* угол наклона */
/*transform: skewX(-30deg) translateX(60px); */ /* строка для удобства настроек блика через иструмент разр. */
opacity: 0.4; /* непрозрачность */
filter: blur(4px); /* размытие */
animation-name: my_flash;
animation-duration: 4s; /* длительность */
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes my_flash {
0% {
transform: skewX(-30deg) translateX(0);
}
30% {
transform: skewX(-30deg) translateX(600px); /* дальность движения */
}
100% {
transform: skewX(-30deg) translateX(600px); /* дальность движения */
}
}
</style>

konstantinDev
Автор

Спасибо! Вставил код - при просмотре сайта с ноута - появился блик на кнопке, с телефона - не работает. Нужно ли что-то добавить в код, чтобы с телефона тоже блик появлялся на кнопке? Благодарю!

shabalaroman