» »

5 кнопок с красивым эффектом на CSS3

5 кнопок с красивым эффектом на CSS3
Отличная коллекция стилей для эффектов кнопок, которые производятся при навивании на них, где всего пять примеров выполнены на чистом HTML и CSS. Теперь для веб-разработчика остается найти ему нужный стиль кнопки, которая соответствует основному дизайну, и безусловно с характерным hover-эффектом. Которые идут в индивидуальной анимации, что совершенно разные по своему трюку, где нет аналогов.

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

Набор стильных эффектов при наведении на кнопку

1. Первый вариант кнопки:

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

HTML

Код
<div class="pervaya-knopka">
<a href="">Кнопка №1</a><a href="">Кнопка №2</a><a href="">Кнопка №3</a>
</div>

CSS

Код
/* 1 кнопка */
.pervaya-knopka a {
  text-decoration: none;
  outline: none;
  display: inline-block;
  color: #f9f8f8;
  padding: 18px 25px;
  margin: 8px 15px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-image: linear-gradient(to right, #76d0d0 0%, #3f29d8 51%, #84e2d2 100%);
  background-size: 200% auto;
  box-shadow: 0 0 20px rgba(12, 12, 12, 0.1);
  transition: .5s;
}
.pervaya-knopka a:hover {background-position: right center;}

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

2. Второй вариант кнопки:

Красивого оформления кнопок для сайт

HTML

Код
<div class="elegantnaya-knopochka">
<a href="">Скрипты №1</a><a href="">Скрипты №2</a><a href="">Скрипты №3</a>
</div>

CSS

Код
/* 2 кнопка */
.elegantnaya-knopochka a {
  text-decoration: none;
  outline: none;
  display: inline-block;
  padding: 18px 25px;
  margin: 8px 15px;
  position: relative;
  color: #fdfdfd;
  border: 1px solid rgba(243, 239, 239, 0.4);
  background: none;
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.elegantnaya-knopochka a:before,
.elegantnaya-knopochka a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  box-sizing: border-box;
}
.elegantnaya-knopochka a:before {
  bottom: 0;
  left: 0;
  border-left: 1px solid #f9f4f4;
  border-top: 1px solid #f9f4f4;
  transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s;
}
.elegantnaya-knopochka a:after {
  top: 0;
  right: 0;
  border-right: 1px solid #fdfafa;
  border-bottom: 1px solid #fdfafa;
  transition: 0s ease opacity .4s, .2s ease width , .2s ease height .2s;
}
.elegantnaya-knopochka a:hover:before,
.elegantnaya-knopochka a:hover:after{
  height: 100%;
  width: 100%;
  opacity: 1;
}
.elegantnaya-knopochka a:hover:before {transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;}
.elegantnaya-knopochka a:hover:after {transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;}
.elegantnaya-knopochka a:hover {background: rgba(255,255,255,.2);}

Здесь для псевдоэлементов по умолчанию выставлена высота в ноль и аналогично идет ширина, что станет изменяться при 100% при наведении.

3. Третий вариант кнопки:

Анимированные эффекты при наведении на кнопку сайта

HTML

Код
<div class="uskanenaya-knorkaus">
<a href="">Переход №1</a><a href="">Переход №2</a><a href="">Переход №3</a>
</div>

CSS

Код
/* 3 кнопка */
.uskanenaya-knorkaus a {
  text-decoration: none;
  outline: none;
  display: inline-block;
  width: 135px;
  height: 43px;
  line-height: 43px;
  border-radius: 43px;
  margin: 8px 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 3px;
  font-weight: 600;
  color: #797675;
  background: white;
  box-shadow: 0 8px 15px rgba(25, 23, 23, 0.2);
  transition: .3s;
  border: 2px solid #e6e1e1;
}
.uskanenaya-knorkaus a:hover {
  background: #4094ea;
  box-shadow: 0 15px 20px rgba(94, 159, 243, 0.4);
  color: #fbf9f9;
  transform: translateY(-7px);
}

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

4. Четвертый вариант кнопки:

Набор hover-эффектов для кнопок на чистом CSS

HTML

Код
<div class="ameyuscu-amanedin">
<a href="">ZorNet.Ru №1</a><a href="">ZorNet.Ru №2</a><a href="">ZorNet.Ru №3</a>
</div>

CSS

Код
/* 4 кнопка */
.ameyuscu-amanedin a {
  text-decoration: none;
  outline: none;
  display: inline-block;
  background-image: linear-gradient(45deg, #3d8ab3 0%, #16f3e8 50%, #1e4084 100%);
  background-position: 100% 0;
  background-size: 200% 200%;
  color: #fdf9f9;
  border-radius: 100px;
  padding: 10px 34px;
  margin: 8px 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 300;
  box-shadow: 0 16px 32px 0 rgba(15, 77, 146, 0.35);
  transition: .5s;
}
.ameyuscu-amanedin a:hover {
  box-shadow: 0 0px 0px 0 rgba(5, 34, 93, 0);
  background-position: 0 0;}

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

5. Пятый вариант кнопки:

Как сделать кнопку с эффектом нажатия с помощью CSS

HTML

Код
<div class="deminiso-vanunakis">
<a href="">Ссылка №1</a><a href="">Ссылка №2</a><a href="">Ссылка №3</a>
</div>

CSS

Код
.deminiso-vanunakis a {
  text-decoration: none;
  outline: none;
  color: #fbf8f8;
  display: inline-block;
  position: relative;
  padding: 14px 24px;
  border: 1px solid;
  border-image: linear-gradient(180deg,#e6441f,#da2927,#e2206e,#f766be);
  border-image-slice: 1;
  margin: 8px 15px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: 2px;
  transition: .8s cubic-bezier(.165,.84,.44,1);
}
.deminiso-vanunakis a:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  width: 100%;
  z-index: -1;
  color: #f9f3f3;
  background: linear-gradient(180deg,#e83f18,#e81917,#ce155f,#f157b5);
  transition: .8s cubic-bezier(.165,.84,.44,1);
}
.deminiso-vanunakis a:hover {background: rgba(253, 249, 249, 0);}
.deminiso-vanunakis a:hover:before {
  bottom: 0%;
  top: auto;
  height: 100%;
}

Здесь увидим с наведением курсора оригинальную подборку оттенков, что также идет под градиент, только в ярких цветах, где меняет высоту с нуля на 100%, где изначально выстраивали дизайн под темный формат.

PS - Как изначально написано в описание, что большинство примеров реализованы в один класс, который отлично редактируется по всем направлениям, это сам трюк и безусловно стилистика дизайна.

Где есть возможность задействовать оригинальную цветовую палитру, также прописать стильный шрифт, но и сам размер подобрать, что соответствовал вашим данным, а точнее, чтоб органично вписались в общею стилистику дизайн сайта.
2019-11-20 Загрузок: 1 Просмотров: 257 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2019-11-23 01:571
0
Здесь представлена первая часть кнопок с оригинальными эффектами при наведение, что по своему дизайну они не похоже. Также можете перейти на вторую часть красивых кнопок на чистом CSS, где аналогично выставлено 5 вариантов.
avatar