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

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

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

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

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

Если смотреть на светлом фоне, то от стандартного вида не отличается, но разве только меняет оттенок цвета, как написано, то здесь по умолчанию идет 3 оттенка, что возможно можно добавить больше.

Красивые CSS3 кнопки с анимацией

Приступаем к установочному процессу:

HTML

Код

<a href="/" target="_blank" class="kadopana"><span>ZORNET.RU</span></a>

CSS

Код

.kadopana {
  display: block;
  width: 220px;
  height: 70px;
  z-index: 1;
}
.kadopana:after {
  content: '';
  background: linear-gradient(120deg, #cc3ac7, #fd2946, #e48951);
  background-size: 400% 400%;
  -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  -moz-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  -webkit-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
}
.kadopana > span {
  display: block;
  background: linear-gradient(120deg, #cc3ac7, #fd2946, #e48951);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-animation: gradient 3s ease-in-out infinite;
  -webkit-animation: gradient 3s ease-in-out infinite;
  animation: gradient 3s ease-in-out infinite;
}
  body:after, .kadopana, .kadopana:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.kadopana {
  font-family: 'Squada One', cursive;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  letter-spacing: 2px;
  line-height: 70px;
  font-size: 28px;
}
@keyframes gradient {
  0% {
  background-position: 14% 0%;
  }
  50% {
  background-position: 87% 100%;
  }
  100% {
  background-position: 14% 0%;
  }
}
@keyframes border {
  0% {
  -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
  -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
  -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  }
  75% {
  -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  }
  100% {
  -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  }
}
@media (max-width:765px) {
  body {
  background: #465769;
  }
}

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

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

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

Кнопка с эффектом градиентов на HTML + CSS

HTML

Код

<a href="#" class="knopka-gradiyent">Zornet.Ru</a>

CSS

Код

.knopka-gradiyent {
  width: 250px;
  display: inline-block;
  margin: 20px 0 0 20px;
  color: #f3f1f1;
  background-color: #a96116;
  background-image: linear-gradient(to right, #4fc0ff, #c71aca);
  box-shadow: 0px 0px 10px 2px rgba(230, 130, 194, 0.85);
  font-size: 23px;
  text-align: center;
  border-radius: 45px;
  padding: 16px 31px;
  font-family: Montserrat;
  text-decoration: none;
}

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

Видео обзор на первый вариант:

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

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

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 01 Сентября 2019 00:27¹ 0 Если кому нужен шрифт, но на страницы демонстраций он размещен.