Оригинальная анимация для кнопки, где при наведении на нее снизу появляется темный фон с информацией. Где больше подойдет под загрузку, так как можно сделать все красиво и понятно для пользователя. А это разместить информацию, если по умолчанию мы видим шрифтовую иконку и ключевое слово.
И после наведем курсор и появляется темный фон, где на нем уже прописана, это сколько весит файл. Как понимаете это один из многих вариантов, в большинстве зависит на каком тематическом сайте она будет переменяться.
Так выглядит при входе на сайт или открытие страницы.
Здесь наведен курсор и уже появляется элемент.
HTML
Код
<div class="knopkada-gruzkayla">
<a href="">СКАЧАТЬ</a>
<span class="averes">нажмите для перехода</span></div>
</div>
CSS
Код
.averes{
background:#e25734;
margin:-25px auto;
opacity:0;
border-radius:0 0 5px 5px;
transform:translate(0,-50px);
transition:350ms;
}
.averes{
opacity:1;
transform:translate(0,0);
}
.knopkada-gruzkayla{
margin:20px auto;
padding:20px 0;
width:200px;
}
.knopkada-gruzkayla a {
background: #a03216;
color: #f3ecec;
display: block;
font-size: 16px;
font-weight: 700;
font-family: 'Arial',Verdana,sans-serif;
height: 48px;
line-height: 48px;
text-align: center;
text-decoration: none;
width: 215px;
position: relative;
z-index: 2;
transition: 350ms;
text-transform: capitalize;
}
.knopkada-gruzkayla a:before { content:'\f0ed'; font-family:FontAwesome;
font-weight:normal;
padding:8px; margin-left:-12px;
margin-right:6px;
}
.knopkada-gruzkayla a:hover{
color:#f9f4f4;
}
.knopkada-gruzkayla span {
background: #2b2929;
color: #f9f4f4;
display: block;
font-size: 13px;
font-family: 'Arial',Verdana,sans-serif;
height: 45px;
line-height: 45px;
text-align: center;
width: 215px;
z-index: 1;
font-weight: bold;
}
.knopkada-gruzkayla .averes {
background: #3e3939;
margin: -25px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.knopkada-gruzkayla:hover .averes{
opacity:1;
transform:translate(0,0);
}
Здесь нужно подключить шрифтовые кнопки FontAwesome для вывода той или иной фигуры.
Демонстрация
