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

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

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

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

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

    Линии кнопок. Эффект при наведении на CSS

    Дата добавления: 29.03.2017 - 01:17
    Категория: Кнопки / иконки
    Добавил: Buger
    Количество просмотров: 1.8k
    Количество комментариев: 0
    Размер файла: 11.3 Kb
    Рейтинг материала: 5.0 / 1
    Линии кнопок. Эффект при наведении на CSS
    БЕСПЛАТНО
    Демонстрация
    рейтинг 5.0
    /
    голосов 1
    Хотите иметь у себя красивый эффект линий для кнопок при наведении на чистом CSS? Тогда думаю что вам данный вид реализации должен понравиться. Эффекты кнопок при наведения курсора с использованием псевдоэлементов. Как обычно, цвет, размер, эффект и многое другое настраивается в стилях. Класс эффекта указан на самих кнопках в демонстрации, что облегчает их настройку.

    HTML разметка
    Код
    <div class="col">
      <a href="#" class="btn btn-1 btn--cw">
      <code class="btn--inner">.btn--cw</code>
      </a>
    </div>

    <div class="col">
      <a href="#" class="btn btn-2 btn--ccw">
      <code class="btn--inner">.btn--ccw</code>
      </a>
    </div>

    <div class="col">
      <a href="#" class="btn btn-3 btn--tlbr">
      <code class="btn--inner">.btn--tlbr</code>
      </a>
    </div>

    <div class="col">
      <a href="#" class="btn btn-4 btn--trbl">
      <code class="btn--inner">.btn--trbl</code>
      </a>
    </div>


    CSS стили
    Код
    .btn-1 {color: #589a4b !important;}
      .btn-2 {color: #624e5b !important;}
      .btn-3 {color: #835054 !important;}
      .btn-4 {color: #55804d !important;}
      .btn-5 {color: #3e929e !important;}
      .btn-6 {color: #868083 !important;}
      .btn-7 {color: #4b6670 !important;}
      .btn-8 {color: #5c6347 !important;}
       
      .btn {
      display: block;
      position: relative;
      overflow: hidden;
      padding: 1.5rem;
      text-decoration: none;
      }
       
      .btn:before,
      .btn:after,
      .btn .btn--inner:before,
      .btn .btn--inner:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      background-color: currentColor;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      }
       
      .btn--cw:after,
      .btn--ccw:after,
      .btn--cw-tlbr:after,
      .btn--ccw-tlbr:after,
      .btn--cw-trbl:after,
      .btn--ccw-trbl:after {
      top: auto;
      right: 0;
      bottom: 0;
      left: auto;
      }
       
      .btn--cw .btn--inner:before,
      .btn--ccw .btn--inner:before,
      .btn--cw-tlbr .btn--inner:before,
      .btn--ccw-tlbr .btn--inner:before,
      .btn--cw-trbl .btn--inner:before,
      .btn--ccw-trbl .btn--inner:before {
      right: 0;
      left: auto;
      }
       
      .btn--cw .btn--inner:after,
      .btn--ccw .btn--inner:after,
      .btn--cw-tlbr .btn--inner:after,
      .btn--ccw-tlbr .btn--inner:after,
      .btn--cw-trbl .btn--inner:after,
      .btn--ccw-trbl .btn--inner:after {
      top: auto;
      bottom: 0;
      }
       
      .btn--cw:before,
      .btn--cw:after {
      width: 0;
      height: 2px;
      }
       
      .btn--cw .btn--inner:before,
      .btn--cw .btn--inner:after {
      width: 2px;
      height: 0;
      }
       
      .btn--cw:hover:before,
      .btn--cw:hover:after {
      width: 100%;
      }
       
      .btn--cw:hover .btn--inner:before,
      .btn--cw:hover .btn--inner:after {
      height: 100%;
      }
       
      .btn--ccw:before,
      .btn--ccw:after {
      width: 2px;
      height: 0;
      }
       
      .btn--ccw .btn--inner:before,
      .btn--ccw .btn--inner:after {
      width: 0;
      height: 2px;
      }
       
      .btn--ccw:hover:before,
      .btn--ccw:hover:after {
      height: 100%;
      }
       
      .btn--ccw:hover .btn--inner:before,
      .btn--ccw:hover .btn--inner:after {
      width: 100%;
      }
       
      .btn--tlbr:before,
      .btn--tlbr:after {
      width: 0;
      height: 2px;
      }
       
      .btn--tlbr:after,
      .btn--tlbr .btn--inner:after {
      top: auto;
      right: 0;
      bottom: 0;
      left: auto;
      }
       
      .btn--tlbr .btn--inner:before,
      .btn--tlbr .btn--inner:after {
      width: 2px;
      height: 0;
      }
       
      .btn--tlbr:hover:before,
      .btn--tlbr:hover:after {
      width: 100%;
      }
       
      .btn--tlbr:hover .btn--inner:before,
      .btn--tlbr:hover .btn--inner:after {
      height: 100%;
      }
       
      .btn--trbl:before,
      .btn--trbl:after {
      width: 0;
      height: 2px;
      }
       
      .btn--trbl:before,
      .btn--trbl .btn--inner:before {
      right: 0;
      left: auto;
      }
       
      .btn--trbl:after,
      .btn--trbl .btn--inner:after {
      top: auto;
      bottom: 0;
      }
       
      .btn--trbl .btn--inner:before,
      .btn--trbl .btn--inner:after {
      width: 2px;
      height: 0;
      }
       
      .btn--trbl:hover:before,
      .btn--trbl:hover:after {
      width: 100%;
      }
       
      .btn--trbl:hover .btn--inner:before,
      .btn--trbl:hover .btn--inner:after {
      height: 100%;
      }
       
      .btn--cw-tlbr:before,
      .btn--cw-tlbr:after,
      .btn--cw-tlbr .btn--inner:before,
      .btn--cw-tlbr .btn--inner:after,
      .btn--ccw-tlbr:before,
      .btn--ccw-tlbr:after,
      .btn--ccw-tlbr .btn--inner:before,
      .btn--ccw-tlbr .btn--inner:after,
      .btn--cw-trbl:before,
      .btn--cw-trbl:after,
      .btn--cw-trbl .btn--inner:before,
      .btn--cw-trbl .btn--inner:after,
      .btn--ccw-trbl:before,
      .btn--ccw-trbl:after,
      .btn--ccw-trbl .btn--inner:before,
      .btn--ccw-trbl .btn--inner:after {
      -webkit-transition: 0.15s ease-in-out;
      transition: 0.15s ease-in-out;
      }
       
      .btn--cw-tlbr:before,
      .btn--cw-tlbr:after {
      width: 0;
      height: 2px;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
      }
       
      .btn--cw-tlbr .btn--inner:before,
      .btn--cw-tlbr .btn--inner:after {
      width: 2px;
      height: 0;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      }
       
      .btn--cw-tlbr:hover:before,
      .btn--cw-tlbr:hover:after {
      width: 100%;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      }
       
      .btn--cw-tlbr:hover .btn--inner:before,
      .btn--cw-tlbr:hover .btn--inner:after {
      height: 100%;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
      }
       
      .btn--ccw-tlbr:before,
      .btn--ccw-tlbr:after {
      width: 2px;
      height: 0;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
      }
       
      .btn--ccw-tlbr .btn--inner:before,
      .btn--ccw-tlbr .btn--inner:after {
      width: 0;
      height: 2px;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      }
       
      .btn--ccw-tlbr:hover:before,
      .btn--ccw-tlbr:hover:after {
      height: 100%;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      }
       
      .btn--ccw-tlbr:hover .btn--inner:before,
      .btn--ccw-tlbr:hover .btn--inner:after {
      width: 100%;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
      }
       
      .btn--cw-trbl:before,
      .btn--cw-trbl:after {
      width: 0;
      height: 2px;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      }
       
      .btn--cw-trbl .btn--inner:before,
      .btn--cw-trbl .btn--inner:after {
      width: 2px;
      height: 0;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
      }
       
      .btn--cw-trbl:hover:before,
      .btn--cw-trbl:hover:after {
      width: 100%;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
      }
       
      .btn--cw-trbl:hover .btn--inner:before,
      .btn--cw-trbl:hover .btn--inner:after {
      height: 100%;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      }
       
      .btn--ccw-trbl:before,
      .btn--ccw-trbl:after {
      width: 2px;
      height: 0;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      }
       
      .btn--ccw-trbl .btn--inner:before,
      .btn--ccw-trbl .btn--inner:after {
      width: 0;
      height: 2px;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
      }
       
      .btn--ccw-trbl:hover:before,
      .btn--ccw-trbl:hover:after {
      height: 100%;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
      }
       
      .btn--ccw-trbl:hover .btn--inner:before,
      .btn--ccw-trbl:hover .btn--inner:after {
      width: 100%;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      }


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


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