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

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

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

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

Так выглядит на светлом фоне:

Градиентная тень кнопки на чистом CSS

Установка:

HTML

Код

<a href="http://zornet.ru/forum/"class="graduensa">КНОПКА</a>

CSS

Код

.graduensa {
  font-size: 15px;
  position: relative;
  outline: none;
  border: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.75em 1.75em;
  border-radius: 50px;
  display: inline-block;
  color: #efe8e8;
  text-shadow: 0 1px 0 #40083d;
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(#6311b7), to(#d20fec));
  background: linear-gradient(to right, #6a0dc7, #e012fb);
}
.graduensa::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -10px;
  left: 5%;
  height: 110%;
  width: 90%;
  opacity: 0.8;
  border-radius: 50px;
  background: inherit;
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
  -ms-filter: blur(6px);
  filter: blur(6px);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.graduensa:hover::after {
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
  width: 100%;
  bottom: -5px;
  left: 0;
}
.graduensa:hover:active::after {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

@supports (-ms-ime-align: auto) {
  .graduensa::after, .graduensa:hover::after, .graduensa:active::after {
  display: none;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .graduensa {
  background: -webkit-gradient(linear, left top, right top, from(#7409e0), to(#db17f5));
  background: linear-gradient(to right, #780ee2, #da15f5);
  }
  .graduensa::after, .graduensa:hover::after, .graduensa:active::after {
  display: none;
  }
}

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

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

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

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

HTML

Код

<a href="#" class="kefekty_animatsu">Эффекты для кнопки</a>

CSS

Код

.kefekty_animatsu {
  position: relative;
  display: inline-block;
  width: 342px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  color: #fff;
  font-size: 23px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background: linear-gradient(
90deg, #15a1e0, #dc2c8e, #bdac18, #118dc5);
  background-size: 375%;
  border-radius: 12px;
  z-index: 1;
}

.kefekty_animatsu:hover {
  animation: animate 8s linear infinite;
}

@keyframes animate {
  0% {
  background-position: 0%;
  }
  100% {
  background-position: 400%;
  }
}

.kefekty_animatsu:before {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: -1;
  background: linear-gradient(
90deg, #179fdc, #d02785, #e2d02c, #1ba7e6);
  background-size: 400%;
  border-radius: 10px;
  opacity: 0;
  transition: .5s;
}

.kefekty_animatsu:hover:before {
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite;
}

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

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

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

28 Сентября 2021 Загрузок: 2 Просмотров: 1816 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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