ZorNet.Ru — сайт для вебмастера » HTML и CSS » Варианты оформления кнопок HTML & CSS

Варианты оформления кнопок HTML & CSS

Пять вариантов красивых эффектов для кнопок HTML, которые предназначены для сайта, где имеют свой оригинальный эффект CSS3 при наведении клика. Иногда требуется поставить кнопку на сайт, где начинаем в сети интернет разбирать разные стили кнопок, которые могли бы отлично смотреться. Но меньше думаем про оригинальность, то здесь как раз варианты, что идут с уникальным эффектом, плюс стильный дизайн.

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

А точнее вашему вниманию будет небольшой набор кнопок, которые полностью созданы на стилистике CSS, где идет реально неповторимые эффекты анимации, что производятся при наведении клика, и безусловно редактирование, это смена стиля или просто поменять оттенок цвета под свой дизайн сайта.

На всех предоставленных кнопок идет стильные hover-эффекты, где все на одном классе krasivaya-knopka - где если вам нужно будет что то добавит, то через этот класс идет основное оформление.

Установочный процесс:

Основной HTML:

Код

<a class="krasivaya-knopka" href="/">ZorNet.Ru №1</a>
<button class="krasivaya-knopka">ZorNet.Ru №2</button>
<input class="krasivaya-knopka" type="button" value="ZorNet.Ru input" />

Здесь нужно подчеркнуть и обратить внимание, так как тег input не имеет псевдоэлементов :before и :after, и вот по этому визуально кнопки отличаются по внешнему виду от button и также a. Где изначально можно посмотреть на страницах демонстраций, где будут закреплены за материалом.

Первый вариант #1:

Код

.krasivaya-knopka {
  display: inline-flex;
  margin: 8px;
  text-decoration: none;
  border: 2px solid #b3c9dc;
  position: relative;
  overflow: hidden;
  font-size: 15px;
  line-height: 15px;
  padding: 12px 28px;
  color: #f3eeee;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  background: #1d6db3;
  transition: box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
  border-radius: 3px;
}

Красивый эффект, где при наведение перетекает светлая тень слева на право, кроме третьей кнопка, там эффект идет по знакам.

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

Второй вариант #2:

CSS

Код

.krasivaya-knopka {
  display: inline-flex;
  margin: 12px;
  text-decoration: none;
  position: relative;
  font-size: 22px;
  line-height: 20px;
  padding: 14px 28px;
  color: #f3eeee;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  background: #1e64a0;
  cursor: pointer;
  border: 2px solid #c4ced6;
  outline: 1px solid;
  outline-color: #267dc7;
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

Здесь при наведение идет эффект волны, что окружает обвод в 1 пиксель.

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

Третий вариант #3:

CSS

Код

.krasivaya-knopka {
  display: inline-flex;
  margin: 8px;
  text-decoration: none;
  position: relative;
  font-size: 16px;
  line-height: 18px;
  padding: 14px 34px;
  color: #f1ecec;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  background: #2168a5;
  cursor: pointer;
  border: 2px solid #c7cdd2;
  border-radius: 3px;
}

Здесь распространенный эффект, где 2 эффекта сверху один и второй снизу подчеркивают основу кнопки, и как всегда третий вариант с другим эффектом.

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

Четвертый вариант #4:

CSS

Код

.krasivaya-knopka {
  display: inline-flex;
  margin: 9px;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  line-height: 18px;
  padding: 14px 28px;
  color: #f9f5f5;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  background: #2c7dd0;
  cursor: pointer;
  border: 2px solid #c3d8ea;
  border-radius: 3px;
}

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

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

Пятый вариант #5:

Оформления кнопок для сайта с помощью transition

CSS

Код

.krasivaya-knopka {
  display: inline-flex;
  margin: 8px;
  text-decoration: none;
  position: relative;
  font-size: 22px;
  line-height: 22px;
  padding: 12px 28px;
  color: #FFF;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  background: #457cab;
  cursor: pointer;
  border: 2px solid #c2d1de;
  overflow: hidden;
  z-index: 1;
  border-radius: 3px;
}

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

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

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

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

Источник: atuin.ru

29 Сентября 2019 Загрузок: 1 Просмотров: 1242 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0