+

Эффекты для кнопок в Тильде

Кнопки являются одними из самых популярных интерактивных элементов пользовательского интерфейса.
Более того, они жизненно важны для создания надежных взаимодействий и положительного пользовательского опыта. Кнопки играют основную роль в диалоге между пользователем и системой.

Дизайн кнопок всегда должен быть узнаваемым и понятным. Использование эффектов для кнопок, позволяет внести изюминку в ваш дизайн и сделать ваш бренд более заметным.

В данной подборке мы решили не повторяться и поделится свежими и интересными эффектами, которые вы можете использовать в своих сайтах на Тильда.

Показываем надпись при наведении

Нажмите на кнопку, чтобы открыть код
1. Добавляем Кнопку — BF101
2. Добавляем HTML-код — T123 и вставляем в него код
наведи на меня

<style>
[href="#hello"] span {
  display: inline-block;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  opacity: 0;
  transform: translate(0, -20px);
}
[href="#hello"] .t142__submit:before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  opacity:1;
  transform: translate(0, 0px);
}
[href="#hello"] .t142__submit:hover:before, [href="#hello"] .t142__submit:focus:before {opacity: 0;transform: translate(0, 20px)}
[href="#hello"]:hover span, [href="#hello"]:focus span {opacity: 1;transform: translate(0, 0)}
[href="#hello"]:hover span:nth-child(1), [href="#hello"]:focus span:nth-child(1) {transition-delay: 0.025s}
[href="#hello"]:hover span:nth-child(2), [href="#hello"]:focus span:nth-child(2) {transition-delay: 0.05s}
[href="#hello"]:hover span:nth-child(3), [href="#hello"]:focus span:nth-child(3) {transition-delay: 0.075s}
[href="#hello"]:hover span:nth-child(4), [href="#hello"]:focus span:nth-child(4) {transition-delay: 0.1s}
[href="#hello"]:hover span:nth-child(5), [href="#hello"]:focus span:nth-child(5) {transition-delay: 0.125s}
[href="#hello"]:hover span:nth-child(6), [href="#hello"]:focus span:nth-child(6) {transition-delay: 0.15s}
[href="#hello"]:hover span:nth-child(7), [href="#hello"]:focus span:nth-child(7) {transition-delay: 0.175s}
</style>

<script>
$('[href="#hello"] .t142__submit').append('<span>c</span><span>п</span><span>a</span><span>с</span><span>и</span><span>б</span><span>о</span>').attr('data-text', $('[href="#hello"] .t142__text').text()).css('width', $('[href="#hello"] .t142__submit').width())
$('[href="#hello"] .t142__text').remove()
</script>

Расширяющийся круг

Нажмите на кнопку, чтобы открыть код
1. Добавляем Кнопку — BF101
2. Добавляем HTML-код — T123 и вставляем в него код
наведи на меня

<style>
[href="#circle"] .t142__text:before {
  content: '';
  position: absolute;
  margin-left: -35px;
  margin-top: 2px;
  width: 80px;
  height: 80px;
  background: #ffd0d0;
  border-radius: 70px;
  z-index: -1;
  transition: 0.3s;
}
[href="#circle"]:hover .t142__text:before {
  content: '';
  position: absolute;
  margin-left: -40px;
  width: 265px;
  height: 80px;
  background: #ff9696;
  transition: 0.3s;
}
</style>

Эффект волны при клике

Нажмите на кнопку, чтобы открыть код
1. Добавляем Кнопку — BF101
2. Добавляем HTML-код — T123 и вставляем в него код
кликни меня

<style>
[href="#click"] .t142__submit {
  position: relative;
}
[href="#click"] .t142__submit:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 17px;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px #9629f5;
}

[href="#click"]:active .t142__submit:after {
  box-shadow: 0 0 0 0 #9629f5;
  position: absolute;
  border-radius: 17px;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
}

[href="#click"]:active .t142__submit {
  transform: scale(0.95);
}
</style>

Плавающий градиент

Нажмите на кнопку, чтобы открыть код
  1. Добавляем Кнопку — BF101
  2. Добавляем HTML-код — T123 и вставляем в него код
  3. Генерируем собственный градиент на cssgradient.io
протестируй сейчас

<style>
[href="#flow"] .t142__submit {
  background: linear-gradient(
    100deg,
    rgba(182, 217, 255, 1) 0%,
    rgba(226, 182, 255, 1) 24%,
    rgba(255, 165, 165, 1) 50%,
    rgba(255, 213, 155, 1) 77%,
    rgba(255, 155, 155, 1) 100%
  );
  background-size: 500%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {background-position: 0% 50%}
  50% {background-position: 100% 50%}
  100% {background-position: 0% 50%}
}
</style>
Made on
Tilda