Как сделать переливающуюся кнопку в тильде

Анимация кнопок в Таплинк (блик). Как поставить для кнопок мессенджеров?

Для начала подготовьте ссылки на мессенджеры. Скопируйте ниже пример ссылки и подставьте вконце свой номер телефона (для Телеграм — логин).

1. На вашей странице Телеграм добавьте новый блок «Ссылка».

2. Введите заголовок ссылки, и описание при необходимости. В поле ссылки вставляем нашу ссылку на мессенджер, которую сделали. Также вы можете здесь выбрать ссылку на внутреннюю страницу сайта, на почту, подставить номер телефона и т.п. Это можно выбрать в списке слева (показала на скриншоте).

3. Идем в настройки. Здесь можно задать свои настройки дизайна для кнопки (выбрать цвет кнопки и текста). Ниже делаем активным ползунок «Анимация» и выбираем Блик.

Есть разные варианты анимации кнопки, можете выбрать какая понравится. Чаще всего используют анимацию Блик.

В Тильда анимация Блик на кнопке делается двумя способами: некоторые стандартные блоки с кнопкой, в Zero блок с помощью кода. Я запишу для вас видео по стандартным блокам.

А html код блика кнопки в Zero блок чуть позже можно будет приобрести в пакете кодов.

Э ффекты для кнопок в Tilda 2

Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.

Связаться с нами
Задать вопрос
Купить шаблон

Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)

Заказать установку примера

Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.

Красивые кнопки для сайта

Вашему вниманию предлагается новая коллекция идей, как можно красиво оформить кнопки для сайта. Необычные эффекты созданы с помощью фоновых заливок, тени блока, трансформаций и псевдоэлементов.

Большинство примеров реализованы на основе одного элемента Button . Вы можете использовать свою цветовую гамму, шрифт и размеры для кнопок, чтобы они гармонично вписались в общий дизайн вашего сайта.

Пример 1.

Анимация при наведении достигается за счёт изменения позиции градиентной заливки.

body < background: #d6eaf8; >.gradient-button < text-decoration: none; display: inline-block; color: white; padding: 20px 30px; margin: 10px 20px; border-radius: 10px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%); background-size: 200% auto; box-shadow: 0 0 20px rgba(0, 0, 0, .1); transition: .5s; >.gradient-button:hover

Пример 2.

Для псевдоэлементов изначально задана нулевая высота и ширина, которая сменяется на 100% при наведении. Блоки, генерируемые с помощью псевдоэлементов, прозрачные, для них заданы левая/верхняя и правая/нижняя границы, которые проявляются при наведении, создавая эффект прорисовки.

body < background: linear-gradient(to top, #55EFCB 0%, #5BCAFF 100%); height: 100%; >.border-button < text-decoration: none; display: inline-block; padding: 20px 30px; margin: 10px 20px; position: relative; color: white; border: 1px solid rgba(255, 255, 255, .4); background: none; font-weight: 300; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; >.border-button:before, .border-button:after < content: ""; position: absolute; width: 0; height: 0; opacity: 0; box-sizing: border-box; >.border-button:before < bottom: 0; left: 0; border-left: 1px solid white; border-top: 1px solid white; transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s; >.border-button:after < top: 0; right: 0; border-right: 1px solid white; border-bottom: 1px solid white; transition: 0s ease opacity .4s, .2s ease width, .2s ease height .2s; >.border-button:hover:before, .border-button:hover:after < height: 100%; width: 100%; opacity: 1; >.border-button:hover:before < transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s; >.border-button:hover:after < transition: 0s ease opacity .4s, .2s ease height .4s, .2s ease width .6s; >.border-button:hover

Пример 3.

Кнопка при наведении меняет цвет фона и текста, тень блока и смещается вверх с помощью трансформации.

body < background: url(https://html5book.ru/wp-content/uploads/2015/07/background39.png); >.floating-button < text-decoration: none; display: inline-block; width: 140px; height: 45px; line-height: 45px; border-radius: 45px; margin: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #524f4e; background: white; box-shadow: 0 8px 15px rgba(0, 0, 0, .1); transition: .3s; >.floating-button:hover

Пример 4.

При наведении кнопка меняет положение градиента, а тень блока исчезает.

body < background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png); >.pressed-button < text-decoration: none; display: inline-block; padding: 12px 40px; margin: 10px 20px; border-radius: 30px; background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%); background-position: 100% 0; background-size: 200% 200%; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 300; color: white; box-shadow: 0 16px 32px 0 rgba(0, 40, 120, .35); transition: .5s; >.pressed-button:hover

Пример 5.

При наведении градиентный блок, генерируемый с помощью псевдоэлемента, меняет высоту с нулевой на 100%.

body < background: #1D1B26; >.sliding-button < text-decoration: none; color: white; display: inline-block; position: relative; padding: 15px 30px; border: 1px solid; border-image: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082); border-image-slice: 1; margin: 10px 20px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; overflow: hidden; letter-spacing: 2px; transition: .8s cubic-bezier(.165, .84, .44, 1); >.sliding-button:before < content: ""; position: absolute; left: 0; top: 0; height: 0; width: 100%; z-index: -1; color: white; background: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082); transition: .8s cubic-bezier(.165, .84, .44, 1); >.sliding-button:hover < background: rgba(255, 255, 255, 0); >.sliding-button:hover:before

Пример 6.

При наведении кнопке добавляется анимация градиентной заливки.

body < background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png); >.animated-button < text-decoration: none; display: inline-block; margin: 10px 20px; padding: 15px 30px; overflow: hidden; border: 2px solid; border-bottom-width: 4px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; color: rgba(30, 255, 188, 1); background: rgba(255, 255, 255, 1); transition: color .3s, background .5s; >.animated-button:hover < animation: stripes .75s infinite linear; background: linear-gradient(45deg, rgba(30, 255, 188, 1) 25%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 50%, rgba(30, 255, 188, 1) 50%, rgba(30, 255, 188, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1)); background-size: 10px 10px; color: #FF50E5; >@keyframes stripes < 0% < background-position: 0 0; >100% < background-position: 50px 0; >>

Пример 7.

Фоновая заливка кнопки создана с помощью внутренней тени блока, которая меняет свой размер при наведении плюс добавляется внешняя тень блока.

body < background: #A4DADA; >.glow-button < text-decoration: none; display: inline-block; padding: 15px 30px; margin: 10px 20px; border-radius: 10px; box-shadow: 0 0 40px 40px #F137A6 inset, 0 0 0 0 #F137A6; font-family: 'Montserrat', sans-serif; font-weight: bold; letter-spacing: 2px; color: white; transition: .15s ease-in-out; >.glow-button:hover

Пример 8.

Эффект «слайда» при наведении реализуется с помощью перемещения блоков-псевдоэлементов, один из которых расположен за левой границей кнопки, второй — за правой границей.

body < background: #ebcacb; >.closing-button < text-decoration: none; display: inline-block; margin: 10px; color: white; box-shadow: 0 0 0 2px white; padding: 20px 0; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden; >.closing-button span < font-family: 'Montserrat', sans-serif; position: relative; z-index: 5; >.closing-button:before, .closing-button:after < content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; >.closing-button:before < transform: translateX(-100%); background: white; transition: transform .3s cubic-bezier(.55, .055, .675, .19); >.closing-button:after < background: #413ad5; transform: translateX(100%); transition: transform .3s cubic-bezier(.16, .73, .58, .62) .3s; >.closing-button:hover:before, .closing-button:hover:after

Пример 9.

Вторая рамка сгенерирована с помощью псевдоэлемента, который дублирует кнопку и при наведении меняет цвет рамки, а также высоту и ширину.

body < background: #1b2631; >.double-border-button < text-decoration: none; display: inline-block; margin: 10px 20px; padding: 10px 30px; position: relative; border: 2px solid #f1c40f; color: #f1c40f; font-family: 'Montserrat', sans-serif; transition: .4s; >.double-border-button:after < content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: auto; border: 2px solid rgba(0, 0, 0, 0); transition: .4s; >.double-border-button:hover:after

Пример 10.

Псевдоэлемент, залитый градиентом, повёрнут на 45 градусов и смещен за левую границу кнопки. При наведении он перемещается за правую границу, создавая эффект блика.

body < background: #ffbfbe; >.shine-button < text-decoration: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; border-radius: 8px; font-family: 'Montserrat', sans-serif; color: #fe6637; transition: .2s ease-in-out; >.shine-button:before < content: ""; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .5)); height: 50px; width: 50px; position: absolute; top: -8px; left: -75px; transform: skewX(-45deg); >.shine-button:hover < background: #fe6637; color: #fff; >.shine-button:hover:before

Эффект фонарика на CSS и jQuery

Вот фонарик очень нужный
И бесценный инструмент,
Лучик света он подарит
В темный блочный элемент.

Данный эффект основан на радиальном градиенте CSS с использованием jQuery для движения.

Пример:

HTML:

CSS:

.spotlight-wrap < background : url ( background.jpg ) no-repeat center center ; background-size : cover ; height : 500px ; cursor : none ; position : relative ; .spotlight-wrap a < position : absolute ; bottom : 30px ; right : 40px ; font-family : "Roboto" , Arial, sans-serif ; font-size : 26px ; line-height : 34px ; color : #AAA ; transition : color 0.5s ; text-shadow : 0 0 12px rgba ( 0,0,0,0.4 ) , 0 2px 6px rgba ( 0,0,0,0.5 ) ; .spotlight-wrap a:hover < color : #FFF ; .spotlight-wrap .spotlight < position : absolute ; height : 500px ; width : 100% ; background-image : radial-gradient ( rgba ( 0, 0, 0, 0.8 ) , rgba ( 0, 0, 0, 0.8 ) ) ;

jQuery:

$ ( window ) . mousemove ( function ( e ) < let w = $ ( '.spotlight' ) . innerWidth ( ) , h = $ ( '.spotlight' ) . innerHeight ( ) , t = e . pageY - $ ( '.spotlight' ) . offset ( ) . top , l = e . pageX - $ ( '.spotlight' ) . offset ( ) . left ;

$ ( ‘.spotlight’ ) . css ( ‘background-image’ , ‘radial-gradient(circle at ‘ + ( l / w * 100 ) + ‘% ‘ + ( t / h * 100 ) + ‘%, transparent 80px, rgba(0, 0, 0, 0.8) 120px)’ ) ;

Если необходимо передвигать фонарик за мышью при скролинге, то используем этот код:

let xMouse = — 300 ,
yMouse = — 300 ,
lastScrolledLeft = 0 ,
lastScrolledTop = 0 ;
$ ( window ) . mousemove ( function ( e ) < updateSpotlight ( e ) ; MousePosition ( e ) ; function updateSpotlight ( e , x , y ) < let w = $ ( '.spotlight' ) . innerWidth ( ) , h = $ ( '.spotlight' ) . innerHeight ( ) , t = e . pageY - $ ( '.spotlight' ) . offset ( ) . top , l = e . pageX - $ ( '.spotlight' ) . offset ( ) . left ;

$ ( ‘.spotlight’ ) . css ( ‘background-image’ , ‘radial-gradient(circle at ‘ + ( x / w * 100 ) + ‘% ‘ + ( y / h * 100 ) + ‘%, transparent 80px, rgba(0, 0, 0, 0.8) 120px)’ ) ;

function MousePosition ( e ) < xMouse = e . pageX - $ ( '.spotlight' ) . offset ( ) . left ; yMouse = e . pageY - $ ( '.spotlight' ) . offset ( ) . top ; $ ( window ) . scroll ( function ( e ) < if ( lastScrolledLeft != $ ( document ) . scrollLeft ( ) ) < xMouse -= lastScrolledLeft ; lastScrolledLeft = $ ( document ) . scrollLeft ( ) ; xMouse += lastScrolledLeft ; if ( lastScrolledTop != $ ( document ) . scrollTop ( ) ) < yMouse -= lastScrolledTop ; lastScrolledTop = $ ( document ) . scrollTop ( ) ; yMouse += lastScrolledTop ; updateSpotlight ( e , xMouse , yMouse ) ; Нравится 17 В закладки

Опубликовано: 26.04.2019
Рубрики: Вкладки, блоки и списки
Метки: CSS, jQuery
10553 просмотра

Смотрите также:

Параллакс-эффекты с библиотекой parallax.js

Небольшая, но удобная библиотека parallax.js для добавления тегам параллакс-эффектов

Поздравление с 8 марта

Блок с вращающимся цветком и поздравлением с 8 марта

Карточки в виде стикеров для заметок

Информационные карточки в виде стикеров со случайным углом наклона

Добавить комментарий:

Ваш комментарий отправлен!

А на каком именно этапе не получилось?
На констуркторах очень много ограничений. С тильдой не знаком, даже незнаю, есть ли там jQuery.
Если есть и можно встроить свой HTML на страницу, то вставляем его, затем CSS
А jQuery вставляем куда нибудь в подвал, где счетчики (на конструкторах обычно только туда можно вставить свой JS)

Людмила: 20.04.2021 в 15:50

там можно загружать скрипты и фото только кодом, без файлов, через script /script
а для jQuery тоже такой тег нужно ставить?

Людмила: 20.04.2021 в 15:54

я в коде не зазбираюсь и даже не понимаю куда адрес картинки нужно прописать) вот сюда код добавила http://ecocandles.tilda.ws/page18968873.html

Alexander: 20.04.2021 в 16:19
Адрес картинки в CSS, а у вас в HTML стоит тегом img
На этой странице вообще CSS не вижу с примера.
Uh: 30.06.2020 в 19:48

Добрый день!
Пытался вставить код в редимаг, но почему-то не работает эффект. Можете подсказать, какие возможны причины?