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

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

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

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

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

Кнопка с красивым эффектом при наведение клика

Во-первых, давайте начнем с базовой кнопки контура с наведением курсора, которую можно создать следующим образом:

HTML

Код

<a href="/" title="ZorNet.Ru" class="conves-asions">ZorNet.Ru</a>

CSS

Код

.conves-asions {
  border: 2px solid #3fca45;
  background-color: transparent;
  color: #3bb940;
  padding: 12px 30px;
  font-size: 16px;
  cursor: pointer;
  transition: 256ms all;
  border-radius: 18px;
}

.conves-asions:hover {
  background-color: #2d8631;
  color: #ececec;
}

Пройдя по ссылке на demo, вы можете посмотреть.

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

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

Кнопка градиент для текста с помощью CSS свойства

Еще один шаг - добавление градиентных границ и текста.

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

HTML

Код

<a class="konseag-cengines" href="/" title="ZorNet.Ru — сайт для вебмастера">Кнопка</a>

CSS

Код

.konseag-cengines {
  display: block;
  width: 150px;
  background: linear-gradient(90deg,#f5eded 3%,#f5f2f2 47%,#f3f323 53%,#f3a820 72%,#f55555 77%,#e41b5a 88%,#9A109A 97%);
  background-size: 200% 100%;
  background-position: left center;
  text-align: center;
  padding: 13px 20px;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.001);
  transition: 256ms all;
  position: relative;
  cursor: pointer;
}

.konseag-cengines:before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: linear-gradient(90deg,#4c97b3 3%,#981539 47%,#e8e81f 53%,#bd851e 72%,#e43232 77%,#d01952 88%,#d00dd0 97%);;
  transition: 256ms all;
  z-index: -1;
  background-size: 200% 100%;
  background-position: left center;
}

.konseag-cengines:after {
  background: rgb(24,24,24);
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

.konseag-cengines:hover,
.konseag-cengines:hover:before {
  background-position: right center;
}

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

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

22 Января 2021 Загрузок: 3 Просмотров: 1054 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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