20 кнопок с анимацией и hover эффектами в CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 2
1
2
»

Форум » Web-Раздел » Начинающему вебмастеру » 20 кнопок с анимацией и hover эффектами в CSS (20 впечатляющих CSS3 примеров на анимиованные кнопки в CSS)

20 кнопок с анимацией и hover эффектами в CSS

Kosten

Вторник, 30 Июня 2020 | Сообщение 1

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Если ранее можно было занять много времени на установку и поиск стильной и красивой кнопки на сайт, то сейчас просто огромный выбор, и время уходит, это какую из множества вариантов поставить на сайт. Так как они выполнены на чистом CSS, где каждая по своему оригинально при наведении клика, что выдает потрясающий эффект.

Если вы решили придать своему сайту немного больше оригинальности, так, чтоб смотрелся сайт изящно, вам наверняка захочется исследовать и использовать анимированные кнопки, что выполнены на чистой стилистике CSS3. Эти фрагменты кода добавляют уникальности вашему ресурсу или блогу, что безусловно оценят большинство посетителей сайта. Кроме того, их можно использовать для придания ощущения динамики и дальнейшей помощи в укреплении вашего бренда.

Ниже приведен список из 20 различных анимированных кнопок CSS, которые вы можете добавить на свой сайт с помощью довольно простого CSS.

Стильные анимированные кнопки CSS для сайта

HTML

Код

<button class="btn first">Скрипты</button>
<button class="btn second">Шаблоны</button>
<button class="btn third">Дизайн</button>
<button class="btn fourth">Стилистика</button>
<button class="btn fifth">CSS</button>
<button class="btn sixth">Скачать</button>

CSS

Код

h1 {
  color: #f1c40f;
  font-size: 4rem;
  text-transform: uppercase;
  display: block;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 3rem;
  }
}

p {
  color: #f1c40f;
  font-size: 1.2rem;
  width: 100%;
  padding: 20px;
  text-align: center;
}

.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}

.first {
  -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
  box-shadow: 0 0 40px 40px #e74c3c inset;
}

.second {
  border-radius: 3em;
  border-color: #1abc9c;
  color: #fff;
  background-image: -webkit-linear-gradient(left, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);
  background-image: linear-gradient(to right, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);
  background-position: 0 0;
  background-size: 100%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.second:hover {
  background-position: 100px;
}

.third {
  border-color: #3498db;
  color: #fff;
  box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db;
  -webkit-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.third:hover {
  box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
}

.fourth {
  border-color: #f1c40f;
  color: #fff;
  background-image: -webkit-linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.fourth:hover {
  background-position: 0;
}

.fifth {
  border-color: #8e44ad;
  border-radius: 0;
  color: #8e44ad;
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.fifth:after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0;
  height: 100%;
  background: #8e44ad;
  z-index: -1;
  -webkit-transition: width 150ms ease-in-out;
  transition: width 150ms ease-in-out;
}
.fifth:hover {
  color: #fff;
}
.fifth:hover:after {
  width: 110%;
}

.sixth {
  border-radius: 3em;
  border-color: #2ecc71;
  color: #2ecc71;
  background-image: -webkit-linear-gradient(top, transparent 50%, #2ecc71 50%);
  background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%);
  background-position: 0% 0%;
  background-size: 210%;
  -webkit-transition: background 150ms ease-in-out, color 150ms ease-in-out;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
}
.sixth:hover {
  color: #fff;
  background-position: 0 100%;
}

На этом все!

Демонстрация

Вы можете добавить интерактивность на свой сайт, не будучи опытным разработчиком. И эта коллекция CSS анимированных кнопок позволяет легко добавить что-то дополнительное в дизайн вашего сайта. Хотите ли вы сделать призыв к действию или сделать навигацию более увлекательной, а также попробуйте эти кнопки при просмотре по работе, что лучше всего подходит для вашего сайта.

Прикрепления: 9128487.png (15.3 Kb) · stylish-animate.zip (5.0 Kb)

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 2

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Анимированные кнопки CSS

See the Pen
animated-css-buttons by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 3

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Больше анимированных кнопок CSS

Этот набор кнопок CSS очень прост, но именно это делает их привлекательными. Если вы хотите добавить немного интерактивности на свой сайт, это безопасная ставка.

See the Pen
css 3 buttons by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 4

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Простая анимация кнопок CSS

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

See the Pen
Simple CSS buttons animation by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 5

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Анимация с кубическим Безье на CSS

Эта забавная кнопка добавит настоящий стиль любому веб-сайту. Когда вы наводите курсор на кнопку, текст внутри нее меняет цвет.

See the Pen
animation with cubic bezier by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 6

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Чистая кнопка CSS

Эта кнопка немного отличается от остальной части этого списка. Он имеет путь клипа, благодаря которому при наведении курсора на текст кнопки анимация круга скользит по стрелке, превращая заостренный конец в точку.

See the Pen
Pure CSS Button (animation with clip-path) by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 7

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Простые CSS-эффекты наведения кнопок

Вот еще один набор довольно заниженных анимированных кнопок, которые все еще могут оказать реальное влияние. Некоторые эффекты включают в себя растягивание текста кнопки, саму кнопку, разбивающуюся в форме X, и цветовые сдвиги.

See the Pen
Simple CSS Button Hover Effects by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 8

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Кнопка CSS с эффектом наведения

Вот еще одна кнопка, которая предлагает супер простой дизайн. При наведении у него развивается аура, которая быстро исчезает.

See the Pen
CSS Button With Hover Effect by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 9

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Красивая анимация для кнопки на CSS

Эта простая кнопка имеет эффект, когда контур кнопки усиливается в цвете и преследует ее границу при наведении на нее курсора.

See the Pen
100 days css Button by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 10

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Круглые кнопки на чистом CSS

Вот еще один набор супер простых кнопок CSS. Они заполняются цветом со всех сторон при наведении и могут использоваться как значки.

See the Pen
Pure CSS Buttons by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 11

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Авто ширина CSS кнопки флип

Когда вы наводите курсор мыши на эту анимированную кнопку, она, кажется, наклоняется вперед, показывая другой текст на «тыльной стороне» кнопки.

See the Pen
Auto Width Css Button Flip by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 12

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Коллекция эффектов наведения кнопок

Вот еще один набор анимированных CSS-кнопок, которые используют забавные эффекты при наведении курсора на выражение. Эффекты контура, заливки и цветовые сдвиги составляют большинство используемых здесь эффектов.

See the Pen
Collection of Button Hover Effects by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 13

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Чистая кнопка CSS с индикатором звонка

Если вы хотите привлечь внимание к призыву к действию или чему-то в этом роде, эта кнопка может быть идеальным выбором. Он постоянно излучает кольцо из своего центра, обращая на это внимание. Затем, при наведении, кнопка подсвечивается и слегка поднимается.

See the Pen
Pure CSS Button with Ring Indicator by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 14

Администраторы

Сообщений:44356

Награды: 70

« 554 »

CSS3 эффекты наведения кнопок с FontAwesome

Этот набор кнопок использует эффекты наведения в сочетании с FontAwesome для некоторых вечных вариантов дизайна. При наведении курсора на эти кнопки вместо текста отображается стрелка, текстовое смещение для размещения стрелки на кнопке и многое другое.

See the Pen
CSS3 Button Hover Effects with FontAwesome by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Вторник, 30 Июня 2020 | Сообщение 15

Администраторы

Сообщений:44356

Награды: 70

« 554 »

3d кнопки с красивым эффектом

See the Pen
Кнопки 3 d by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Страница 1 из 2
1
2
»