CSS
Дизайн

Примеры CSS-кода для вашего сайта

Мы собрали для вас несколько интересных эффектов для картинок, секций и кнопок, которые легко сможет использовать даже новичок у себя на сайте. Как правильно размещать CSS-код в настройках редактора mottor можно посмотреть в видео ниже.

Сложность · Средняя

Где можно добавлять и редактировать свой CSS?

1. Открываем редактор сайта
Находим нужный блок или секцию, которым хотим добавить собственные стили. Жмем на иконку с 3 точками и "Настроить CSS":

Пример настройки dns-серверов для сайта на mottor

2. Редактируем код
Видим окно редактирования кода. Его можно разделить на 2 части — для полной версии сайта и для мобильной версии:

• Если вам нужно добавить код для всего блока, то добавлять его нужно внутри конструкции:

& {
/*ваш код*/
}

• Если вы обращаетесь к отдельным элементам по классу или применяете стили для каких-то конкретных блоков внутри родительского — код нужно добавлять отдельно ниже:

& {
}
/*ваш код*/

Результат выполнения кода лучше всего смотреть в предварительном просмотре :)

Посмотрите наши вебинары
Простыми словами рассказываем про основы работы с CSS.
Разбираем на примерах кода, которые есть на этой странице
CSS для блоков
Пример 1
Градиент для текста
ГРАДИЕНТНЫЙ ТЕКСТ
Настройки CSS
.blk-data {
background: linear-gradient(270deg, #ffcf6f, #e463d9)!important;
-webkit-background-clip: text!important;
-webkit-text-fill-color: transparent!important;
}
Пример 2
Градиент для группы
Настройки CSS
Без анимации:

.blk_box_self {
background-image: linear-gradient(270deg, #ffcf6f, #e463d9)!important;
}

С анимацией:

.blk_box_self {
background-image: linear-gradient(270deg, #ffcf6f, #e463d9)!important;
background-size: 400% 400%!important;

-webkit-animation: AnimationName 3s ease infinite!important;
-moz-animation: AnimationName 3s ease infinite!important;
-o-animation: AnimationName 3s ease infinite!important;
animation: AnimationName 3s ease infinite!important;
}

@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
Пример 3
Градиент для фигуры
Настройки CSS
Без анимации:

.shape {
background: linear-gradient(45deg, #ffcf6f, #e463d9);
}

С анимацией:

.shape {
background: linear-gradient(45deg, #ffcf6f, #e463d9);
background-size: 400% 400%;

-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
-o-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
}

@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
Пример 4
Градиент для кнопки
Настройки CSS
Без анимации:

.btn-new {
background: linear-gradient(45deg, #ffcf6f, #e463d9);
}

С анимацией:

.btn-new {
background: linear-gradient(45deg, #ffcf6f, #e463d9);
background-size: 400% 400%;

-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
-o-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
}

.btn-new:hover {
background: linear-gradient(45deg, #ffcf6f, #e463d9);
background-size: 400% 400%;

-webkit-animation: AnimationName 3s ease infinite;
-moz-animation: AnimationName 3s ease infinite;
-o-animation: AnimationName 3s ease infinite;
animation: AnimationName 3s ease infinite;
}

.btn-new:active {
background: linear-gradient(45deg, #ffcf6f, #e463d9);
background-size: 400% 400%;

-webkit-animation: AnimationName 3s ease infinite;
-moz-animation: AnimationName 3s ease infinite;
-o-animation: AnimationName 3s ease infinite;
animation: AnimationName 3s ease infinite;
}

@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
Пример 5
Градиент для секции
Настройки CSS
& {
background: linear-gradient(270deg, #ffcf6f, #e463d9);
background-size: 400% 400%;

-webkit-animation: AnimationName 7s ease infinite;
-moz-animation: AnimationName 7s ease infinite;
-o-animation: AnimationName 7s ease infinite;
animation: AnimationName 7s ease infinite;
}

@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
Пример 6
Размытие картинки
Настройки CSS
img {
transition: 0.3s;
filter: blur(5px);
}

img:hover {
filter: blur(0px);
}
Пример 7
Насыщенность картинки
Настройки CSS
img {
transition: 0.3s;
filter: saturate(0%);
}

img:hover {
filter: saturate(100%);
}
Пример 8
Прозрачность картинки
Настройки CSS
img {
transition: 0.3s;
opacity: 0.2;
}

img:hover {
opacity: 1;
}
Пример 9
Увеличение при наведении
Настройки CSS
img {
transition: 0.4s;
}

img:hover {
transform: scale(1.07);
}
Пример 10
Уменьшение при наведении
Настройки CSS
img {
transition: 0.4s;
}

img:hover {
transform: scale(0.95);
}
CSS для кнопок
Пример 1
Анимация пульсации
Настройки CSS
.btn-new {
animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(44,102,204, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(44,102,204, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(44,102,204, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(44,102,204, 0.4);
box-shadow: 0 0 0 0 rgba(44,102,204, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(44,102,204, 0);
box-shadow: 0 0 0 10px rgba(44,102,204, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(44,102,204, 0);
box-shadow: 0 0 0 0 rgba(44,102,204, 0);
}
}
Пример 2
Свечение кнопки
Настройки CSS
.btn-new {
animation: shadow 1s infinite alternate;
}

@keyframes shadow {
from {
box-shadow:1px 1px 22px 1px rgba(162,193,246,0.57);
}
to {
box-shadow:1px 1px 37px 12px rgba(162,193,246,0.66);
}
}
Пример 3
Анимация блика
Настройки CSS
@keyframes slideme {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}

.btn-new {
overflow: hidden;
position: relative;
}

.btn-new:after {
content: "";
display: block;
width: 50px;
height: 250px;
margin-left: 60px;
background: linear-gradient(90deg, transparent, #ffffff, transparent);
opacity: 0.4;
position: absolute;
left: -40px;
top: -100px;
transform: rotate(45deg);
transition: all 0.1s;
animation-name: slideme;
animation-duration: 3s;
animation-delay: 0.05s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
Пример 4
Анимация дрожания #1
Настройки CSS
.btn-new:hover {
-webkit-animation-name: buzz;
animation-name: buzz;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
}
@-webkit-keyframes buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}

@keyframes buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}
Пример 5
Анимация дрожания #2
Настройки CSS
.btn-new:hover {
-webkit-animation: swing 0.6s ease;
animation: swing 0.6s ease;
}

@-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);
}
}
Пример 6
Анимация кнопки #1
Настройки CSS
.btn-new:hover {
-webkit-animation: rubberBand 0.6s ease;
animation: rubberBand 0.6s ease;
}
@keyframes rubberBand {
0% {transform: scale(1);}
30% {transform: scaleX(1.05) scaleY(0.85);}
40% {transform: scaleX(0.85) scaleY(1.10);}
60% {transform: scaleX(1.05) scaleY(0.95);}
100% {transform: scale(1);}
}
Пример 7
Анимация кнопки #2
Настройки CSS
.btn-new {
transition: 0.25s;
--color: #ffcf6f;
--hover: #ffcf6f;
}

.btn-new:hover, .btn-new:focus {
border-color: var(--hover);
color: #fff;
box-shadow: inset 0 0 0 2em var(--hover);
}
Пример 8
Анимация кнопки #3
Настройки CSS
.btn-new {
transition: 0.25s;
--color: #2196F3;
--hover: #2196F3;
}

.btn-new:hover, .btn-new:focus {
color: #ffffff;
box-shadow: inset -4.5em 0 0 0 var(--hover), inset 4.5em 0 0 0 var(--hover);
}
Пример 9
Анимация кнопки #4
Настройки CSS
.btn-new {
transition: 0.4s;
--color: #2196F3;
--hover: #2196F3;
}

.btn-new:hover, .btn-new:focus {
color: #ffffff;
box-shadow: inset 0 -4.25em 0 0 var(--hover);
}
Пример 10
Кнопка с увеличивающейся иконкой
Настройки CSS
.btn-new:hover {
background-image: url('//m-files-new.cdnvideo.ru/lpfile/4/a/f/4af16011eba7d6b441be027aa9dc5d8e/-/crop/0x0x96x100/-/resize/96/f.png');
background-repeat: no-repeat;
background-size: 24px;
background-position: 90% 50%;
padding-right: 70px;
}

.btn-new {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/4/a/f/4af16011eba7d6b441be027aa9dc5d8e/-/crop/0x0x96x100/-/resize/96/f.png');
background-repeat: no-repeat;
background-size: 18px;
background-position: 90% 50%;
padding-right: 70px;
}

.btn-new:active {
background-image: url('//m-files-new.cdnvideo.ru/lpfile/4/a/f/4af16011eba7d6b441be027aa9dc5d8e/-/crop/0x0x96x100/-/resize/96/f.png');
background-repeat: no-repeat;
background-size: 24px;
background-position: 90% 50%;
padding-right: 70px;
}
Пример 11
Кнопка с появляющейся иконкой #1
Настройки CSS
.btn-new {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/0/2/9/0291823c090f09814a9bd59d56e0b1f1/-/crop/0x0x95x95/-/resize/95/f.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: -20% 50%;

}

.btn-new:hover {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/0/2/9/0291823c090f09814a9bd59d56e0b1f1/-/crop/0x0x95x95/-/resize/95/f.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: 10% 50%;
padding-left: 75px;
}

.btn-new:active {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/0/2/9/0291823c090f09814a9bd59d56e0b1f1/-/crop/0x0x95x95/-/resize/95/f.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: 10% 50%;
padding-left: 75px;
}
Пример 12
Кнопка с появляющейся иконкой #2
Настройки CSS
.btn-new {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/b/f/1/bf1108e3442694b46735374450cf55b4/-/crop/0x0x86x86/-/resize/86/f.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: 120% 50%;
}

.btn-new:hover {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/b/f/1/bf1108e3442694b46735374450cf55b4/-/crop/0x0x86x86/-/resize/86/f.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: 87% 50%;
padding-right: 75px;
}

.btn-new:active {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/b/f/1/bf1108e3442694b46735374450cf55b4/-/crop/0x0x86x86/-/resize/86/f.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: 87% 50%;
padding-left: 75px;
}
Пример 13
Кнопка с появляющейся картинкой
Настройки CSS
.btn-new {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/c/4/1/c412454ea7735452464f1d10f6af36b3/-/crop/0x0x120x120/-/resize/120/f.png');
background-repeat: no-repeat;
background-size: 50px;
background-position: 175px 40px;
padding-right: 80px;
}


.btn-new:hover {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/c/4/1/c412454ea7735452464f1d10f6af36b3/-/crop/0x0x120x120/-/resize/120/f.png');
background-repeat: no-repeat;
background-size: 70px;
background-position: 140px 4px;
padding-right: 80px;
}

.btn-new:active {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/c/4/1/c412454ea7735452464f1d10f6af36b3/-/crop/0x0x120x120/-/resize/120/f.png');
background-repeat: no-repeat;
background-size: 70px;
background-position: 140px 4px;
padding-right: 80px;
}
Пример 14
Кнопка с иконкой
Настройки CSS
.btn-new {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/4/4/0/440a9ebb303d7ff11e73c79b659001ff/-/crop/0x0x36x57/-/resize/36/f.png');
background-repeat: no-repeat;
background-size: 10px;
background-position: 130px 52%;
padding-right: 65px;
}

.btn-new:hover {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/4/4/0/440a9ebb303d7ff11e73c79b659001ff/-/crop/0x0x36x57/-/resize/36/f.png');
background-repeat: no-repeat;
background-size: 10px;
background-position: 140px 52%;
padding-right: 70px;
padding-left: 45px;
}

.btn-new:active {
transition: .3s;
background-image: url('//m-files-new.cdnvideo.ru/lpfile/4/4/0/440a9ebb303d7ff11e73c79b659001ff/-/crop/0x0x36x57/-/resize/36/f.png');
background-repeat: no-repeat;
background-size: 10px;
background-position: 140px 52%;
padding-right: 70px;
padding-left: 45px;
}
Пример 15
Кнопка со свечением и приподнятием
Настройки CSS
.btn-new {
box-shadow: 0 5px 15px 0 rgba(33, 150, 243, 1);
transition: 0.5s;
}

.btn-new:hover {
transform: translate(0,-3px);
box-shadow: 0 20px 40px 0 rgba(33, 150, 243, 0.6);
}
Пример 16
Кнопка со свечением и опусканием
Настройки CSS
.btn-new {
box-shadow: 0 5px 15px 0 rgba(33, 150, 243, 1);
transition: 0.5s;
}

.btn-new:hover {
transform: translate(0,-3px);
box-shadow: 0 20px 40px 0 rgba(33, 150, 243, 0.6);
}
Пример 17
Кнопка со свечением и приподнятием при наведении
Настройки CSS
.btn-new {
transition: 0.5s;
}

.btn-new:hover {
transform: translate(0,-3px);
box-shadow: 0 20px 40px 0 rgba(33, 150, 243, 0.6);
}
Пример 18
Кнопка с эффектом нажатия на клавишу
Настройки CSS
.btn-new {
box-shadow: 0px 7px 0px #003BC5;
}

.btn-new:hover {
position: relative;
top: 2px;
box-shadow: 0px 5px 0px #003BC5;
}

.btn-new:active {
position: relative;
top: 5px;
box-shadow: 0px 2px 0px #003BC5;
}
Пример 19
Кнопка с поворотом при наведении
Настройки CSS
.btn-new {
transition: .5s;
background: #0B63F6;
}

.btn-new:hover {
transform: rotateZ(5deg);
}
Пример 20
Кнопка с анимированной нижней границей
Настройки CSS
.btn-new {
transition: .5s;
}

.btn-new:hover {
box-shadow:0px -6px 0 #003CC5 inset;
}
Пример 21
Выдвигающаяся анимированная кнопка
Настройки CSS
.btn-new {
transition: .2s;
position: relative;
top: 0;
left: 0;
}

.btn-new:hover {
box-shadow: 2px 2px white, 4px 4px #FC63B5;
top: -4px;
left: -4px;
}
Пример 22
Кнопка с появляющейся границей
Настройки CSS
.btn-new {
transition: .2s;
}

.btn-new:hover {
box-shadow: 0 0 0 2px white, 0 0 0 4px #3C82F8;
}
Пример 23
Анимация поднятия
Настройки CSS
.btn-new {
transition: .3s;
}

.btn-new:hover {
transform: translate(0, -5px);
}
Пример 24
Анимация опускания
Настройки CSS
.btn-new {
transition: .3s;
}

.btn-new:hover {
transform: translate(0, 5px);
}
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Документы:
Полезные ссылки:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России