Это простая кнопка с отличным эффектом, где при наведение клика меняется оттенок цвета, только он смена происходит не стандартном виде. Где начнется основа смена самого низа и подниматься вверх. А 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;
}
На этом нужно все сохранить, ведь установка завершена.
Демонстрация
