• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Кнопка с эффектом нажатие на HTML + CSS (Потрясающие эффекты для кнопок при нажатии на HTML + CSS)
Кнопка с эффектом нажатие на HTML + CSS
Kosten
Дата: Понедельник, 2019-05-20, 01:40 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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

По умолчанию:



При нажатие:



Установка:

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, которая закреплена за каркасом.

Демонстрация
Прикрепления: 0305477.png(2.5 Kb) · 6285671.png(2.4 Kb) · zadesugiv.zip(1.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Кнопка с эффектом нажатие на HTML + CSS (Потрясающие эффекты для кнопок при нажатии на HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: