• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура HTML элемента » Кнопка с эффектом на CSS наведения вверх (Красивая по своему эффекту иконка с оригинальной анимация)
Кнопка с эффектом на CSS наведения вверх
Kosten
Дата: Понедельник, 2020-07-27, 22:13 | Сообщение 1
Оффлайн
Администраторы
Сообщений:27204
Награды: 61


Это простая кнопка с отличным эффектом, где при наведение клика меняется оттенок цвета, только он смена происходит не стандартном виде. Где начнется основа смена самого низа и подниматься вверх. А pначит вы сами можете задать скорость поднятие гаммы цвета и безусловно по ее смене, ведь все сделано на чистом CSS.

На светлом формате:



На темном сайте или фоне:



Установка:

HTML

Код
<a href="#" class="asunektom-navedeniya ion-arrow-graph-up-left"></a>
<a href="#" class="asunektom-navedeniya ion-arrow-graph-down-left"></a>
<a href="#" class="asunektom-navedeniya ion-stats-bars"></a>
<a href="#" class="asunektom-navedeniya ion-connecticon ion-bars"></a>
<a href="#" class="asunektom-navedeniya ion-pie-graph"></a>
<a href="#" class="asunektom-navedeniya ion-chatbubble"></a>

CSS

Код
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.asunektom-navedeniya {
  position: relative;
  font-size: 40px;
  background-color: rgba(50, 50, 50, 0.3);
  color: #ffffff;
  width: 75px;
  margin: 40px;
  height: 75px;
  display: inline-block;
  text-align: center;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.asunektom-navedeniya:before {
  z-index: 2;
  display: block;
  line-height: 75px;
}
.asunektom-navedeniya:after {
  position: absolute;
  bottom: 0;
  top: 100%;
  left: 0;
  right: 0;
  background: #2980b9;
  content: '';
  z-index: -1;
}
.asunektom-navedeniya:before,
.asunektom-navedeniya:after {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.asunektom-navedeniya:hover,
.asunektom-navedeniya:active,
.asunektom-navedeniya.hover {
  color: #ffffff;
}
.asunektom-navedeniya:hover:after,
.asunektom-navedeniya:active:after,
.asunektom-navedeniya.hover:after {
  top: 0;
}

На этом нужно все сохранить, ведь установка завершена.

Демонстрация
Прикрепления: 8442156.png(13.0 Kb) · 9450701.png(12.9 Kb) · zornet-ru-icons.zip(3.7 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура HTML элемента » Кнопка с эффектом на CSS наведения вверх (Красивая по своему эффекту иконка с оригинальной анимация)
  • Страница 1 из 1
  • 1
Поиск: