Эта настраиваемая подсказка для различных кнопок, где при наведение будет появляться подсказка по вверх. Где появление при зависании и исчезает во взгляде с использованием стиля анимации сверху вниз. Через которую можно вывести актуальную информацию. что очень будет нужна пользователю или тому, кто решил скачать или где закреплена функция.
Также можно поставить под любую тематику, здесь сам эффект появление идет вмести с кнопкой, что сама кнопки по своему строению аналогично меняется. Что качается подсказки, то саму гамму цвета можно выстраивать в CSS. которое преложено к самому каркасу.
1.
2.
HTML
Код
<section>
<div class="center">
<h4>ZorNet - портал для вебмастера</h4>
<a class="kadognloads" href="#0">
<span>
<em>Ключевые слова</em>
<i class="fa fa-download"></i>
</span>
</a>
<br>
<br>
</section>
CSS
Код
section {
width: 100%;
height: 100vh;
display: table;
}
section .center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.kadognloads {
position: relative;
background: #E75A7C;
display: inline-block;
height: 60px;
width: 200px;
border-radius: 50em;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
span,
em,
i {
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
span {
overflow: hidden;
}
.kadognloads em {
top: 0;
line-height: 60px;
}
.kadognloads i {
top: 100%;
line-height: 60px;
}
.kadognloads:hover em,
.kadognloads.hover em{
top: -100%;
}
.kadognloads:hover i,
.kadognloads.hover i{
top: 0%;
}
em,
i {
transition: top 0.3s;
}
.kadognloads::before,
.kadognloads::after {
position: absolute;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.kadognloads::before {
content: 'File Size: 5mb';
width: 160px;
height: 60px;
background: #0E84A1;
border-radius: 0.25em;
bottom: 90px;
line-height: 60px;
left: calc(50% - 80px);
font-size: 15px;
}
.kadognloads::after {
content: '';
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-color: #0E84A1;
bottom: 70px;
left: calc(50% - 10px);
}
.kadognloads:hover::before,
.kadognloads:hover::after,
.kadognloads.hover::before,
.kadognloads.hover::after{
opacity: 1;
visibility: visible;
}
.kadognloads:hover::before,
.kadognloads.hover::before{
bottom: 80px;
}
.kadognloads:hover::after,
.kadognloads.hover::after{
bottom: 60px;
}
Также изначально можно посмотреть на demo страницы.
Демонстрация
