Интернет магазин шабонов
Форма входа

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

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

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

Дата добавления: 29.03.2017 - 01:17
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 123
Количество комментариев: 0
Размер файла: 11.3Kb
Рейтинг материала: 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/
Добавлять комментарии могут только зарегистрированные пользователи.