• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура кода HTML » Игривые эффекты CSS наведения кнопок (Оригинальные эффекты с наведением курсора на кнопку)
Игривые эффекты CSS наведения кнопок
Kosten
Дата: Суббота, 2020-02-22, 01:38 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26125
Награды: 60


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

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



HTML

Код
<button class="button">ZORNET.RU</button>
<button class="button alternative">КРАСИВЫЕ КНОПКИ!</button>
<button class="button simple">АНИМАЦИЯ</button>

CSS

Код
.button.alternative {
  --color-hover: #2B3044;
  --background: #362A89;
  --hover-back: #6D58FF;
  --hover-front: #F6F8FF;
}
.button.simple {
  --background: #275EFE;
  --background-hover: #1749DB;
}

.button {
  --color: #fff;
  --color-hover: var(--color);
  --background: #2B3044;
  --background-hover: var(--background);
  --hover-back: #6D58FF;
  --hover-front: #5C86FF;
  padding: 8px 28px;
  border-radius: 20px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  color: var(--c, var(--color));
  background: var(--b, var(--background));
  -webkit-transition: color 0.2s linear var(--c-d, 0.2s), background 0.3s linear var(--b-d, 0.2s);
  transition: color 0.2s linear var(--c-d, 0.2s), background 0.3s linear var(--b-d, 0.2s);
}
.button:not(.simple):before, .button:not(.simple):after {
  content: '';
  position: absolute;
  background: var(--pb, var(--hover-back));
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  border-radius: var(--br, 40%);
  -webkit-transform: translateY(var(--y, 50%));
          transform: translateY(var(--y, 50%));
  -webkit-transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
  transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
  transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s);
  transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
}
.button:not(.simple):after {
  --pb: var(--hover-front);
  --d: .44s;
}
.button div {
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: flex;
}
.button div span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: var(--name, none) 0.7s linear forwards 0.18s;
          animation: var(--name, none) 0.7s linear forwards 0.18s;
}
.button.in {
  --name: move;
}
.button.in:not(.out) {
  --c: var(--color-hover);
  --b: var(--background-hover);
}
.button.in:not(.out):before, .button.in:not(.out):after {
  --y: 0;
  --br: 5%;
}
.button.in:not(.out):after {
  --br: 10%;
  --d-d: .02s;
}
.button.in.out {
  --name: move-out;
}
.button.in.out:before {
  --d-d: .06s;
}

@-webkit-keyframes move {
  30%,
    36% {
    -webkit-transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
            transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
  }
  50% {
    -webkit-transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
            transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
  }
  70% {
    -webkit-transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
            transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
  }
}

@keyframes move {
  30%,
    36% {
    -webkit-transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
            transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
  }
  50% {
    -webkit-transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
            transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
  }
  70% {
    -webkit-transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
            transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
  }
}
@-webkit-keyframes move-out {
  30%,
    36% {
    -webkit-transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
            transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
  }
  50% {
    -webkit-transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
            transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
  }
  70% {
    -webkit-transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
            transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
  }
}
@keyframes move-out {
  30%,
    36% {
    -webkit-transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
            transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
  }
  50% {
    -webkit-transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
            transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
  }
  70% {
    -webkit-transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
            transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  font-family: 'Inter UI', 'Inter', Arial;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: #E1E6F9;
}
@media (max-width: 440px) {
  body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
}
body .button {
  display: block;
  margin: 0 8px;
}
body .button:first-child {
  margin-left: 0;
}
body .button:last-child {
  margin-right: 0;
}
@media (max-width: 440px) {
  body .button {
    margin: 8px 0;
  }
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}

JS

Код
document.querySelectorAll('.button').forEach(button => {

    let div = document.createElement('div'),
        letters = button.textContent.trim().split('');

    function elements(letter, index, array) {

        let element = document.createElement('span'),
            part = (index >= array.length / 2) ? -1 : 1,
            position = (index >= array.length / 2) ? array.length / 2 - index + (array.length / 2 - 1) : index,
            move = position / (array.length / 2),
            rotate = 1 - move;

        element.innerHTML = !letter.trim() ? ' ' : letter;
        element.style.setProperty('--move', move);
        element.style.setProperty('--rotate', rotate);
        element.style.setProperty('--part', part);

        div.appendChild(element);

    }

    letters.forEach(elements);

    button.innerHTML = div.outerHTML;

    button.addEventListener('mouseenter', e => {
        if(!button.classList.contains('out')) {
            button.classList.add('in');
        }
    });

    button.addEventListener('mouseleave', e => {
        if(button.classList.contains('in')) {
            button.classList.add('out');
            setTimeout(() => button.classList.remove('in', 'out'), 950);
        }
    });

});

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

Демонстрация
Прикрепления: 5360478.jpg(28.7 Kb) · button-hover-ef.zip(6.5 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура кода HTML » Игривые эффекты CSS наведения кнопок (Оригинальные эффекты с наведением курсора на кнопку)
  • Страница 1 из 1
  • 1
Поиск: