КАК ПРИМЕНЯТЬ ЭФФЕКТЫ К КНОПКАМ
Подходит для ZERO и стандартных блоков
1
Назначьте класс для кнопки
Если вы находитесь в зеро-блоке, то кликните на объекте правой кнопкой мыши, найдите пункт Add Css Class, и задайте классу имя, указанное перед каждым кодом. Например, grette_1.

Если вы работаете со стандартным блоком, то нажмите пункт "Настройки", почти в самом низу нажмите на строчку "Добавить CSS Class Name". Добавьте имя класса, указанное перед кодом, но перед ним добавьте "uc-". Например, uc-grette_1.
2
Добавьте код
В самом низу страницы добавьте блок из категории Другое - T123 HTML-код. Зайдите в контент и скопируйте туда код нужного эффекта.
3
Сохраните изменения
4
Опубликуйте проект
БЛЕСК
Эффект Блеск
  • Стиль для зеро блока grette_1
  • Стиль для стандартного блока uc-grette_1
<script>
$(document).ready(function() {
	$('.grette_1 .tn-atom, .uc-grette_1 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>

<style>
.grette_1 .tn-atom,
.uc-grette_1 .t-btn {
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.grette_1 .grette__wrap,
.uc-grette_1 .grette__wrap {    
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.grette_1 .grette__inner,
.uc-grette_1 .grette__inner {    
	width: 100%;
	height: 100%;
	-webkit-transform: translateX(-85px);
	-ms-transform: translateX(-85px);
	transform: translateX(-85px);
	-webkit-animation-name: grette_1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 4s;
	animation-name: grette_1;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 4s;
}

.grette_1 .grette__effect,
.uc-grette_1 .grette__effect {    
	position: absolute;
	top: 0;
	left: 30px;
	width: 45px;
	height: 100%;
	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));
	-webkit-transform: skewX(-45deg);
	-ms-transform: skewX(-45deg);
	transform: skewX(-45deg);
}

@-webkit-keyframes grette_1 {
	50% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}

@keyframes grette_1 {
	50% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}
</style>
БЛИК
Эффект Блик
  • Стиль для зеро блока grette_6
  • Стиль для стандартного блока uc-grette_6
<script>
$(document).ready(function() {
	$('.grette_6 .tn-atom, .uc-grette_6 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>

<style>
.grette_6 .tn-atom,
.uc-grette_6 .t-btn {    
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.grette_6 .grette__wrap,
.uc-grette_6 .grette__wrap {    
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.grette_6 .grette__inner,
.uc-grette_6 .grette__inner {    
	width: 100%;
	height: 100%;
	-webkit-transform: translateX(-85px);
	-ms-transform: translateX(-85px);
	transform: translateX(-85px);
	-webkit-animation-name: grette_6;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 4s;
	animation-name: grette_6;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 4s;
}

.grette_6 .grette__effect,
.uc-grette_6 .grette__effect {    
	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 grette_6 {
	15% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	20% {
		-webkit-transform: translateX(31%);
		transform: translateX(31%);
	}

	50% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}

@keyframes grette_6 {
	15% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	20% {
		-webkit-transform: translateX(31%);
		transform: translateX(31%);
	}

	50% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}
</style>
СИЯНИЕ
Эффект Сияние
  • Стиль для зеро блока grette_7
  • Стиль для стандартного блока uc-grette_7
<script>
$(document).ready(function() {
	$('.grette_7 .tn-atom, .uc-grette_7 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>

<style>
.grette_7 .tn-atom,
.uc-grette_7 .t-btn {    
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.grette_7 .grette__wrap,
.uc-grette_7 .grette__wrap {    
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.grette_7 .grette__inner,
.uc-grette_7 .grette__inner {    
	width: 100%;
	height: 100%;
}

.grette_7 .grette__effect,
.uc-grette_7 .grette__effect {    
	position: absolute;
	top: 0;
	left: -100%;
	height: 350%;
	width: 200%;
	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: grette_7;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 4s;
	animation-name: grette_7;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 4s;
}

@-webkit-keyframes grette_7 {
	60% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}
}

@keyframes grette_7 {
	60% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}
}
</style>
БЛЕСК ПРИ НАВЕДЕНИИ
Эффект Блеск при наведении
  • Стиль для зеро блока grette_8
  • Стиль для стандартного блока uc-grette_8
<script>
$(document).ready(function() {
	$('.grette_8 .tn-atom, .uc-grette_8 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>

<style>
.grette_8 .tn-atom,
.uc-grette_8 .t-btn {
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.grette_8 .grette__wrap,
.uc-grette_8 .grette__wrap {    
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.grette_8 .grette__wrap:hover .grette__inner,
.uc-grette_8 .grette__wrap:hover .grette__inner {    
	width: 100%;
	height: 100%;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-animation-name: grette_8;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	animation-name: grette_8;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 2s;
}

.grette_8 .grette__effect,
.uc-grette_8 .grette__effect {    
	position: absolute;
	top: 0;
	left: -85px;
	width: 45px;
	height: 100%;
	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));
	-webkit-transform: skewX(-45deg);
	-ms-transform: skewX(-45deg);
	transform: skewX(-45deg);
}

@-webkit-keyframes grette_8 {
	85% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
	}

	100% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
	}
}

@keyframes grette_8 {
	85% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
	}

	100% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
	}
}
</style>
БЛИК ПРИ НАВЕДЕНИИ
Эффект Блик при наведении
  • Стиль для зеро блока grette_19
  • Стиль для стандартного блока uc-grette_19
<script>
$(document).ready(function() {
	$('.grette_19 .tn-atom, .uc-grette_19 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>

<style>
.grette_19 .tn-atom,
.uc-grette_19 .t-btn {    
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.grette_19 .grette__wrap,
.uc-grette_19 .grette__wrap {    
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.grette_19 .grette__wrap:hover .grette__inner,
.uc-grette_19 .grette__wrap:hover .grette__inner {    
	width: 100%;
	height: 100%;
	-webkit-transform: translateX(-85px);
	-ms-transform: translateX(-85px);
	transform: translateX(-85px);
	-webkit-animation-name: grette_19;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	animation-name: grette_19;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 2s;
}

.grette_19 .grette__effect,
.uc-grette_19 .grette__effect {    
	position: absolute;
	top: 0;
    left: -60px;
    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 grette_19 {
	30% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	40% {
		-webkit-transform: translateX(31%);
		transform: translateX(31%);
	}

	70% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
	}

	100% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
	}
}

@keyframes grette_19 {
	30% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	40% {
		-webkit-transform: translateX(31%);
		transform: translateX(31%);
	}

	70% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
	}

	100% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
	}
}
</style>
СИЯНИЕ ПРИ НАВЕДЕНИИ
Эффект Сияние при наведении
  • Стиль для зеро блока grette_20
  • Стиль для стандартного блока uc-grette_20
<script>
$(document).ready(function() {
	$('.grette_20 .tn-atom, .uc-grette_20 .t-btn').append('<div class="grette__wrap"><div class="grette__inner"><div class="grette__effect"></div></div></div>');
});
</script>

<style>
.grette_20 .tn-atom,
.uc-grette_20 .t-btn {    
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.grette_20 .grette__wrap,
.uc-grette_20 .grette__wrap {    
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.grette_20 .grette__inner,
.uc-grette_20 .grette__inner {    
	width: 100%;
	height: 100%;
}

.grette_20 .grette__wrap:hover .grette__effect,
.uc-grette_20 .grette__wrap:hover .grette__effect {    
	position: absolute;
	top: 0;
	left: -100%;
	height: 350%;
	width: 200%;
	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: grette_20;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	animation-name: grette_20;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 2s;
}

@-webkit-keyframes grette_20 {
	90% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}
}

@keyframes grette_20 {
	90% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}
}
</style>
Made on
Tilda