← Назад
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);
}
Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курса
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школы
Шаблон для портфолио
Шаблон лендинг для вебинаров
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Создать квиз
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Помощь
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Инструкции для пользователей
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке