• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Кнопка загрузки с эффектом при наведение (Кнопка с эффектом появления при наведение курсора CSS)
Кнопка загрузки с эффектом при наведение
Kosten
Суббота, 03 Августа 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Оригинальная анимация для кнопки, где при наведении на нее снизу появляется темный фон с информацией. Где больше подойдет под загрузку, так как можно сделать все красиво и понятно для пользователя. А это разместить информацию, если по умолчанию мы видим шрифтовую иконку и ключевое слово.

И после наведем курсор и появляется темный фон, где на нем уже прописана, это сколько весит файл. Как понимаете это один из многих вариантов, в большинстве зависит на каком тематическом сайте она будет переменяться.

Так выглядит при входе на сайт или открытие страницы.



Здесь наведен курсор и уже появляется элемент.



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 для вывода той или иной фигуры.

Демонстрация
Прикрепления: 7869333.png (2.5 Kb) · 7767180.png (4.7 Kb) · password.zip (3.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Кнопка загрузки с эффектом при наведение (Кнопка с эффектом появления при наведение курсора CSS)
  • Страница 1 из 1
  • 1
Поиск: