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

Анимация градиентов для кнопок на CSS

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

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

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

Где красиво смотрится на светлом и на темном фоне.

Как пример:

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

HTML

Код

<div class="karkas-knopki">
<button class="struktura vamed1"><a href="#" id="gradiyent" class="zornetumindsa">ZORNET.RU</a></button>
<button class="struktura vamed2"><a href="#" id="gradiyent" class="zornetumindsa">ZORNET.RU</a></button>
<button class="struktura vamed3"><a href="#" id="gradiyent" class="zornetumindsa">ZORNET.RU</a></button>
<button class="struktura vamed4"><a href="#" id="gradiyent" class="zornetumindsa">ZORNET.RU</a></button>
</div>

CSS

Код

.karkas-knopki{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

#gradiyent {
  font-size: 14px;
  font-weight: bold;
  color: #fbfbfb;
  text-shadow: 0 1px 0 #756e6e;
  text-decoration: none;
}

.struktura {
  border: none;
  margin: 15px;
  padding: 24px;
  width: 238px;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  color: #eaeaea;
  background-size: 200%;
  transition: .6s;
}
.vamed1 {
  background-image: linear-gradient(to left,#e4ae0d,#d64510,#eab20a);
}
.vamed2 {
  background-image: linear-gradient(to left,#b5da17,#0e6f2f,#b2d80f);
}
.vamed3 {
  background-image: linear-gradient(to left,#10bfb9,#171248,#0fb9b3);
}
.vamed4 {
  background-image: linear-gradient(to left,#cb12e2,#283a5a,#e016da);
}
.struktura:hover{
  background-position:right;
}

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

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

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

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

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

СКАЧАТЬ

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

Kosten

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