Форма входа

    Бесплатный раздел

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Эффект с анимацией при наведении на кнопку при помощи jQuery и CSS3

    Дата добавления: 15.12.2020 - 08:24
    Категория: Кнопки / иконки
    Добавил: Buger
    Количество просмотров: 770
    Количество комментариев: 0
    Размер файла: 3.0 Kb
    Рейтинг материала: 0.0 / 0
    Эффект с анимацией при наведении на кнопку при помощи jQuery и CSS3
    рейтинг 0.0
    /
    голосов 0
    Необычный, учитывающий направление, эффект наведения, который появляется в зависимости от направления, в котором указатель мыши входит в элемент.
    Идеально подходит для создания интерактивной кнопки призыва к действию с использованием небольшого количества JavaScript и CSS/CSS3.

    Как использовать:


    1. Создайте кнопку призыва к действию там, где вы хотите применить эффект пульсации при наведении.
    Код
    <div class="action-button">
      <a href="#">
      <span></span>  
      Button Hover Effect
      </a>
    </div>


    2. Пример CSS для кнопки.
    Код
    .read-more > a {
      border: 2px solid rgb(0, 119, 255);
      color: rgb(0, 119, 255);
      display: inline-block;
      font-size: 1.8rem;
      overflow: hidden;
      padding: 10px 30px;
      position: relative;
      text-transform: uppercase;
      -webkit-transition: 0.5s linear;
      -moz-transition: 0.5s linear;
      -ms-transition: 0.5s linear;
      -o-transition: 0.5s linear;
      transition: 0.5s linear;
    }

    .read-more > a:hover {
      color: #ffffff;
    }


    3. Примените стили CSS к эффекту наведения пульсации.
    Код
    .read-more > a > span {
      background-color: rgb(0, 119, 255);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      color: #ffffff;
      display: block;
      height: 0;
      position: absolute;
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      -webkit-transition: height 1s, width 1s;
      -moz-transition: height 1s, width 1s;
      -ms-transition: height 1s, width 1s;
      -o-transition: height 1s, width 1s;
      transition: height 1s, width 1s;
      width: 0;
      z-index: -1;
    }

    .read-more > a:hover > span {
      height: 700px;
      width: 700px;
    }


    4. JavaScript (сценарий jQuery) для отслеживания события mouseenter и применения эффекта пульсации к кнопке.
    Код
    $(function() {
      $(".action-button > a").on('mouseenter', function(e) {
      x = e.pageX - $(this).offset().left;
      y = e.pageY - $(this).offset().top;
      $(this).find("span").css({
      top: y,
      left: x
      });
      });
      $(".action-button > a").on('mouseout', function(e) {
      x = e.pageX - $(this).offset().left;
      y = e.pageY - $(this).offset().top;
      $(this).find("span").css({
      top: y,
      left: x
      });
      });
    });
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: