Кнопка с анимированным бликом при наведении на CSS3
Отличный эффект блика и плавной смены цвета при наведении на кнопочку. Всё выполнено на чистом CSS
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
button.shine { background: #333; color: #ccc; width: 200px; height: 60px; border: 0; font-size: 18px; border-radius: 4px; font-family: 'Raleway', sans-serif; transition: .6s; overflow: hidden; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } button.shine:focus { outline: 0; } button.shine:before { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.5); width: 60px; height: 100%; left: 0; top: 0; opacity: .5; -webkit-filter: blur(30px); filter: blur(30px); -webkit-transform: translateX(-100px) skewX(-15deg); transform: translateX(-100px) skewX(-15deg); } button.shine:after { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.2); width: 30px; height: 100%; left: 30px; top: 0; opacity: 0; -webkit-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(-100px) skewX(-15deg); transform: translateX(-100px) skewX(-15deg); } button.shine:hover { background: #338033; cursor: pointer; } button.shine:hover:before { -webkit-transform: translateX(300px) skewX(-15deg); transform: translateX(300px) skewX(-15deg); opacity: 0.6; transition: .7s; } button.shine:hover:after { -webkit-transform: translateX(300px) skewX(-15deg); transform: translateX(300px) skewX(-15deg); opacity: 1; transition: .7s; } |
2#: В то место, где хотите видеть кнопочку, поместите следуюий код:
|
1 |
<button class="shine">Наведи на меня</button> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Очень интересно! Спасибо что кинули мне ссылку.
Что касается данного примера, то давно, время от времени пытаюсь сделать блик в виде волн от капли, без jQuery, вот так, как здесь в примере 09 https://tympanus.net/Development/DistortedButtonEffects/, но получается какая-то хрень.
Ну там не jQuery, а HTML5 (Tree canvas) + SVG фильтры. Согласен, выглядит эффектно и, думаю, на чистом CSS такое не провернуть... если только через псевдо элементы, но всё равно такой ряби не получить, насколько позволяют судить мои познания
Вот у меня и не получается. Попробую покопать canvas. Я пока как-то не углублялся в этом направлении.
В данном случае лучше копать SVG