Стили кнопок CSS

Стили кнопок CSS

Пример 1

Кнопка с анимацией "нажатия" при наведении

Настройки CSS

.btn-new {
    border: none;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    background: #0B63F6;
    box-shadow: 0 5px 0 #003CC5;
}

.btn-new:hover {
    background: #003CC5;
    box-shadow: none;
    position: relative;
    top: 5px;
}

Пример 2

Кнопка с появляющейся границей

Настройки CSS

.btn-new {
    border-radius: 10px;
    color: white;
    transition: .2s linear;
    background: #0B63F6;
}

.btn-new:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #3C82F8;
}

Пример 3

Выдвигающаяся анимированная кнопка

Настройки CSS

.btn-new {
    border-radius: 10px;
    color: white;
    transition: .2s linear;
    background: #0B63F6;
    position: relative;
    top: 0;
    left: 0;
}

.btn-new:hover {
    box-shadow: 2px 2px white, 4px 4px #FC63B5;
    top: -4px;
    left: -4px;
}

Пример 4

Кнопка с анимированной нижней границей

Настройки CSS

.btn-new {
    border-radius: 0px;
    color: white;
    transition: .2s linear;
    background: #0B63F6;
}

.btn-new:hover {
    box-shadow:0px -6px 0 #003CC5 inset;
}

Пример 5

Кнопка с анимированным затемнением

Настройки CSS

.btn-new {
    border-radius: 10px;
    color: white;
    transition: .2s linear;
    background: #0B63F6;
}

.btn-new:hover {
   box-shadow: #003CC5 0 0px 0px 40px inset;
}

Пример 6

Кнопка с анимированным градиентом

Настройки CSS

.btn-new {
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    background-image: linear-gradient(to right, #003CC5 0%, #0B63F6 51%, #003CC5 100%);
}

.btn-new:hover {
     background-position: right center;
}

Пример 7

Кнопка с поворотом при наведении

Настройки CSS

.btn-new {
    border-radius: 10px;
    color: white;
    transition: .2s linear;
    background: #0B63F6;
}

.btn-new:hover {
    -webkit-transform: rotateZ(5deg);
    -ms-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
}

Пример 8

Кнопка с анимированным бликом

Настройки 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: 30px;
  height: 200px;
  margin-left: 60px;
  background: #fff;
  opacity: 0.5;
  position: absolute;
  left: -40px;
  top: -100px;
  z-index: 1;
  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;
}

Пример 9

Кнопка со свечением

Настройки CSS

.btn-new {
  box-shadow: 0 5px 15px 0 rgba(11, 99, 246, 1);
  transition: 0.5s;
}

.btn-new:hover {
  transform: translate(0,-3px);
  box-shadow: 0 20px 40px 0 rgba(11, 99, 246, 1);

}

Пример 10

Кнопка с анимированным бликом. Вариант 2

Настройки 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: "";
    position: absolute;
    top: 0;
    left: -200px;
    width: 60px;
    height: 100px;
    background-color: #fff;
    filter: blur(30px);
    transform: skewX(30deg) translateZ(0);
    transition: 1s;
    animation-name: slideme;
    animation-duration: 3s;
    animation-delay: 0.05s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

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