Форма входа

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

    Вы здесь: Главная страница » Файлы » Кнопки / иконки
    Уважаемые друзья и пользователи сайта ART-UCOZ!

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

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

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

    Классный эффект при наведении на кнопку на CSS3

    Дата добавления: 28.03.2017 - 20:02
    Категория: Кнопки / иконки
    Добавил: Buger
    Количество просмотров: 1.5k
    Количество комментариев: 0
    Размер файла: 2.3 Kb
    Рейтинг материала: 5.0 / 1
    Классный эффект при наведении на кнопку на CSS3
    БЕСПЛАТНО
    Демонстрация
    рейтинг 5.0
    /
    голосов 1
    Классный эффект при наведении на кнопку. Такое встретишь не так часто, по этому было бы не плохо поделится с вами данной реализацией.
    Установка и настройка тривиальная. Вам остается только добавить нужный код самой кнопки для ее отображения и прописать стили для нее. По умолчанию кнопка имеет темный вид, но вы ее сможете настроить под светлые проекты, достаточно изменить в стилях нужный вам цвет, размер и так далее. В общем экспериментируйте. Применяйте такую реализацию в своих проектах и удивляйте своих пользователей чем-то интересным и живым.

    HTML
    Код
    <div class="btn-wrapper">
      <div class="btn-wrapper__container">
      <div class="btn-inner">
      <a class="btn-inner__text" href="#">Наведи</a>
      </div>
      </div>
    </div>


    CSS
    Код
    <style type="text/css">
      html,
      body {
      height: 100%;
      margin: 0;
      }
       
      body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url("https://image.ibb.co/icbLMF/ep_naturalblack.png");
      }

      .btn-wrapper {
      width: 290px;
      height: 110px;
      position: relative;
      margin: 40px auto 0;
      }
       
      .btn-wrapper:hover .btn-inner {
      top: -4px;
      transform: scale(1, 1);
      cursor: pointer;
      }
       
      .btn-wrapper__container {
      border-bottom: 2px solid #15B5E2;
      position: absolute;
      width: 100%;
      height: 80px;
      }
       
      .btn-wrapper__container:before,
      .btn-wrapper__container:after {
      border-bottom: 2px solid #15B5E2;
      width: 96%;
      left: 2%;
      bottom: -8px;
      content: "";
      position: absolute;
      }
       
      .btn-wrapper__container:after {
      width: 92%;
      left: 4%;
      bottom: -14px;
      }
       
      .btn-wrapper__container .btn-inner {
      width: 104.2%;
      height: 100%;
      position: absolute;
      top: 20px;
      left: -2.1%;
      border: 2px solid #15B5E2;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-size: 18px;
      background: #10131C;
      transform: scale(0.96, 0.96);
      transition: all .3s;
      z-index: 4;
      }
       
      .btn-wrapper__container .btn-inner__text {
      text-decoration: none;
      color: #15B5E2;
      }
    </style>


    Источник: http://art-ucoz.ru/
    Добавлять комментарии могут только зарегистрированные пользователи.


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