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

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

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

1
Примеры написаны для различных блоков
2
Номер блока указан в описании примера
3
Для использования на различных кнопках и объектах нужно уметь работать с классами элементов html
4
Код вставляется в блок ДРУГОЕ►Т123
Mo-Ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Посмотреть все доступные видео
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Длительность видео: 80 мин
Bounce
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code


<style>

 .t142__submit:hover {
	animation: bounce 1s;
}
@keyframes bounce {
	0%, 20%, 60%, 100% {
		transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		transform: translateY(-20px);
		transform: translateY(-20px);
	}

	80% {
		transform: translateY(-10px);
		transform: translateY(-10px);
	}
}
</style>
Переворот 3D
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>

 .t142__submit {
	transform-style: preserve-3d;
        transform-origin: center bottom;
        transition: all 800ms ease;
}   
   
 .t142__submit:after {
	top: -100%;
    left: 0px;
    width: 100%;
    color: #ffd630;
    padding: 10px 0;
    position: absolute;
    background: #000000;
    border-radius: 5px;
    content: 'Show code';
    transform-origin: left bottom;
    transform: rotateX(90deg);
    line-height: 2.4;
    height: 40px;
}   
   
 .t142__submit:hover {
    transform: rotateX(-90deg) translateY(100%);
}

</style>
Swing
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>

@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
 
@keyframes swing {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
 
 .t142__submit:hover {
  -webkit-animation: swing 0.6s ease;
  animation: swing 0.6s ease;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
}
</style>
Увеличение
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
 .t142__submit{
  transition: all 400ms ease;
 } 
.t142__submit:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
Уменьшение
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
 .t142__submit{  
  transition: all 400ms ease;
 } 
.t142__submit:hover {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
</style>
Wobble Horizontal
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>

 .t142__submit:hover {
   -webkit-animation-name: wobble-horizontal;
    animation-name: wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@keyframes wobble-horizontal {
16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
}
33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
}
49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}
66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
}
83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
}
100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
}
</style>
Wobble Vertical
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>

  .t142__submit:hover {
   -webkit-animation-name: wobble-vertical;
    animation-name: wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}



@keyframes wobble-vertical {
16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
}

33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
}

49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
}

66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

}



</style>
Pulse Grow
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>

.t142__submit{
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 } 
 .t142__submit:hover {
   -webkit-animation-name: pulse-grow;
    animation-name: pulse-grow;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@keyframes pulse-grow {
100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

}

</style>
Wobble Skew
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
.t142__submit:hover {
   webkit-animation-name: wobble-skew;
    animation-name: wobble-skew;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
@keyframes wobble-skew {
16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
}
33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
}
49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
}
66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
}
83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
}
100% {
    -webkit-transform: skew(0);
    transform: skew(0);
}
}
</style>
Buzz Out
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
 .t142__submit:hover {
   webkit-animation-name: buzz-out;
    animation-name: buzz-out;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@keyframes buzz-out {
10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
}
20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
}
30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
}
40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
}
50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
}
60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
}
70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
}
80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
}
90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
}
100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
}
}
</style>
Border Trim
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
 
 .t142__submit{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    position: relative;
 } 

.t142__submit:before {
    content: '';
    position: absolute;
    border: white solid 4px;
    border-radius: 5px;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
 .t142__submit:hover:before {
    opacity: 1;
}

</style>
Border Outline Outward
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
 .t142__submit { 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
    position: relative;
}
 .t142__submit:before {
    content: '';
    position: absolute;
    border: #ffd630 solid 4px;
    border-radius: 5px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left;
}
 .t142__submit:hover:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}
</style>
Border Outline Inward
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
.t142__submit {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
    position: relative;
}
 .t142__submit:before {
    pointer-events: none;
    content: '';
    position: absolute;
    border: #ffd630 solid 4px;
    border-radius: 5px;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left;
}
.t142__submit:hover:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    opacity: 1;
}
</style>
Float Shadow
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
.t142__submit {
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); 
}
 
.t142__submit:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}
     
.t142__submit:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.t142__submit:hover:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

</style>
Hover Shadow Levitation Button
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
 .t142__submit {
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}
 .t142__submit:before {
   pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}
     
.t142__submit:hover {
    webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-name: hover;
    animation-name: hover;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
 .t142__submit:hover:before {
    opacity: .4;
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    -webkit-animation-name: hover-shadow;
    animation-name: hover-shadow;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@keyframes hover{

50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}
100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
}
}
@keyframes hover-shadow{

50% {
    opacity: .4;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}

100% {
    opacity: 1;
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
}
}
</style>
Rotate 3D X
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>

.t142__submit {
	-o-transition: transform 1s linear;
	-ms-transition: transform 1s linear;
	-moz-transition: transform 1s linear;
	-webkit-transition: transform 1s linear;
	transition: transform 1s linear;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
 
}
 
.t142__submit:hover {
    -o-transform: rotate3d(1, 0, 0, 360deg);
	-ms-transform: rotate3d(1, 0, 0, 360deg);
	-moz-transform: rotate3d(1, 0, 0, 360deg);
	-webkit-transform: rotate3d(1, 0, 0, 360deg);
	transform: rotate3d(1, 0, 0, 360deg);
}

</style>
Rotate 3D Y
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code


 
 .t142__submit {
	-o-transition: transform 1s linear;
	-ms-transition: transform 1s linear;
	-moz-transition: transform 1s linear;
	-webkit-transition: transform 1s linear;
	transition: transform 1s linear;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
 
}
.t142__submit:hover {
    -o-transform: rotate3d(0, 1, 0, 360deg);
	-ms-transform: rotate3d(0, 1, 0, 360deg);
	-moz-transform: rotate3d(0, 1, 0, 360deg);
	-webkit-transform: rotate3d(0, 1, 0, 360deg);
	transform: rotate3d(0, 1, 0, 360deg);
}
</style>
Rotate 3D Z
При нажатии на кнопку вы сможете увидеть код для эффекта для блока BF101
Show code

<style>
 .t142__submit {
	-o-transition: transform 1s linear;
	-ms-transition: transform 1s linear;
	-moz-transition: transform 1s linear;
	-webkit-transition: transform 1s linear;
	transition: transform 1s linear;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
 
}
.t142__submit:hover {
    -o-transform: rotate3d(0, 0, 1, 360deg);
	-ms-transform: rotate3d(0, 0, 1, 360deg);
	-moz-transform: rotate3d(0, 0, 1, 360deg);
	-webkit-transform: rotate3d(0, 0, 1, 360deg);
	transform: rotate3d(0, 0, 1, 360deg);
}
</style>
Press Effect
При нажатии на кнопку вы сможете увидеть код для эффекта для блока CR16
Show code

<script>
$(document).ready(function(){
  $(".t182 .t-btn").addClass("mybuttonstyle") 
  $(".mybuttonstyle").wrapInner("<span class='MytextBl'></span>");    
  $(".mybuttonstyle").prepend("<span class='shadow'></span>");
});
</script>

<style>
@keyframes
	sheen{
		0%,79%{
			opacity:0;filter:alpha(opacity=0);
			-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
			transform:rotateZ(60deg) translate(-5em,7.5em)
		}
		80%{
			opacity:1;
			filter:alpha(opacity=100);
			-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
			transform:rotateZ(60deg) translate(-5em,7.5em)
		}
		95%{
			opacity:1;
			filter:alpha(opacity=100);
			-webkit-transform:rotateZ(60deg) translate(1em,-11em);
			transform:rotateZ(60deg) translate(1em,-11em)
		}
		100%{
			opacity:0;
			filter:alpha(opacity=0);
			-webkit-transform:rotateZ(60deg) translate(1em,-9em);
			transform:rotateZ(60deg) translate(1em,-9em)
		}
	}
.mybuttonstyle {
    outline: none;
	position: relative;
	top: -7px;
	margin: 10px 0;
	overflow: hidden;
	box-shadow: 0 4px 0 #e7b642, 0 25px 15px -10px #e3d1a8;
	-webkit-transition: all 0.2s ease-out 0s;
	-moz-transition: all 0.2s ease-out 0s;
	-o-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.mybuttonstyle span.MytextBl {
	position: relative;
	z-index: 3;
}
.mybuttonstyle span.shadow {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 -45px 80px -25px #fec744;
}
.mybuttonstyle:hover {
	background: #ffe828 !important;
}
.mybuttonstyle:active {
	background: #fec744 !important;
	position: relative;
	top: -1px;
	box-shadow: none;
}
.mybuttonstyle:before{
	content:'';
	position:absolute;
	top:-50%;
	right:-50%;
	bottom:-50%;
	left:-50%;
	background:-webkit-gradient(linear,left top,left bottom,from(#e5ac8e),color-stop(50%,#fff),color-stop(50%,#e5ac8e));
	background:-webkit-gradient(linear,left top,left bottom,from(rgba(229,172,142,0)),color-stop(50%,rgba(255,255,255,.7)),color-stop(50%,rgba(229,172,142,0)));
	background:linear-gradient(to bottom,rgba(229,172,142,0),rgba(255,255,255,.7) 50%,rgba(229,172,142,0));
	-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
	-ms-transform:rotate(60deg) translate(-5em,7.5em);
	transform:rotateZ(60deg) translate(-5em,7.5em);
	opacity:0;
	filter:alpha(opacity=0);
	-webkit-animation:sheen 3s infinite;
	animation:sheen 3s infinite
}
</style>
Tilda effects - FLASH
При нажатии на кнопку вы сможете увидеть код для эффекта для блока AB105
Show code

<script>
$(document).ready(function(){
  $(".t482 .t-btn").addClass("tildaflash").append('<div class="flash_wrap-effects"><div class="flash_effects"></div></div>');
});
</script>

<style>

  .tildaflash {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

    
  .flash_wrap-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(-85px);
    -ms-transform: translateX(-85px);
    transform: translateX(-85px);
    -webkit-animation-name: tildaflash;
    animation-name: tildaflash;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

 .flash_effects {
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .4)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
    background: -o-linear-gradient(left, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
    background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
    width: 45px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 30px;
    -webkit-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    transform: skewX(-45deg);
}





@-webkit-keyframes tildaflash {
  20% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
  }
  100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
  }
}

@keyframes
	tildaflash{
	20% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
	100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
	}
 
</style>
Tilda effects - RIPPLE
При нажатии на кнопку вы сможете увидеть код для эффекта для блока AB105
Show code

<script>
$(document).ready(function(){
  $(".t482 .t-btn").addClass("tildaripple").append('<div class="ripple_effects"></div>');
});
</script>

<style>

  .tildaripple {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

    
  .ripple_effects {
   position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

 .ripple_effects::after {
    content: '';
    position: absolute;
    height: 350%;
    width: 200%;
    top: 0;
    left: -100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    z-index: 20;
    -webkit-animation-name: tildaripple;
    animation-name: tildaripple;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes tildaripple {
  20% {
    opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
  }
  100% {
    opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
  }
}

@keyframes tildaripple {
  20% {
    opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
  }
  100% {
    opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
  }
}
</style>
Tilda effects - LIGHT
При нажатии на кнопку вы сможете увидеть код для эффекта для блока AB105
Show code

<script>
$(document).ready(function(){
  $(".t482 .t-btn").addClass("tildalight").append('<div class="light_wrap-effects"><div class="light_effects"></div></div>');
});
</script>

<style>
  .tildalight {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

    
  .light_wrap-effects {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(-60px);
    -ms-transform: translateX(-60px);
    transform: translateX(-60px);
    -webkit-animation-name: tildalight;
    animation-name: tildalight;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

 .light_effects {
   position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255,255,255, 0.5)), to(rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255,255,255, 0.5) 50%, rgba(255, 255, 255, 0));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255,255,255, 0.5) 50%, rgba(255, 255, 255, 0));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255,255,255, 0.5) 50%, rgba(255, 255, 255, 0));
}



@-webkit-keyframes tildalight {
  20% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
  }
  100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
  }
}

@keyframes
	tildalight{
	20% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
	100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
	}
 
</style>
Made on
Tilda