| Kosten | Понедельник, 20 Мая 2019, 01:40 | Сообщение 1 |
| Красивый эффект всегда завораживает, если говорить о кнопке, то мы больше привыкли видеть эффект смены палитры цвета. Здесь же создаем кнопку, которая идет в сером оттенке, где на светлом и темном сайте отлично просматривается. Ведь у не главная анимация, это когда вы делаете клик наведя на кнопку, то она производит красивый эффект нажатие.
Сам дизайн выполнен великолепно, где есть свои небольшие обводы, также добавление стилистики. Но главным считаю, это все создана на чистых стилях. Она отлично подойдет под файлы, который нужно скачать сайта, также можно увидеть на переходе на другую страницу.
По умолчанию:
При нажатие:
Установка:
HTML
Код <a href="#" class="dutesam-legamin">Скачать</a>
CSS
Код a.dutesam-legamin {
position: relative;
display: inline-block;
width: 7em;
height: 3em;
line-height: 3em;
vertical-align: middle;
text-align: center;
text-decoration: none;
user-select: none;
color: #1f1e1e;
outline: none;
border: 1px solid rgba(58, 63, 66, 0.8);
border-top-color: rgba(14, 14, 14, 0.3);
border-radius: 5px;
background-color: rgb(216, 222, 226);
background-image: -webkit-linear-gradient(rgb(206,220,231), rgb(82, 93, 99));
background-image: linear-gradient(rgb(213, 218, 222), rgb(78, 103, 115));
box-shadow: 0 -1px rgba(10,21,28,.9) inset, 0 1px rgba(247, 238, 238, 0.5) inset;
}
a.dutesam-legamin:hover {
background-image: -webkit-linear-gradient(#d4dee6, #708794);
background-image: linear-gradient(#d6dce2, #7a909c);
}
a.dutesam-legamin:active {
line-height: 2.6em;
background-image: -webkit-linear-gradient(#bac6cf, #c5d3de 20%, #71828c);
background-image: linear-gradient(#bac6cf, #c5d3de 20%, #71828c);
box-shadow: 0 -1px rgba(255,255,255,.4) inset;
}
a.dutesam-legamin:before {
content: "";
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
z-index: -1;
border-radius: 8px;
background-image: -webkit-linear-gradient(rgba(191, 183, 183, 0.5), rgba(245, 234, 234, 0.5));
background-image: linear-gradient(rgba(197, 186, 186, 0.5), rgba(236, 227, 227, 0.5));
}
Если вам нужно поменять гамму или добавить больше теней, то все нужно производить в CSS, которая закреплена за каркасом.
Демонстрация
| | Страна: (RU) |
| |
