• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Кнопка с простым и красивым эффектом CSS (Кнопка при наведение растягивается при помощи HTML + CSS)
Кнопка с простым и красивым эффектом CSS
Kosten
Дата: Четверг, 2019-08-01, 21:09 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24630
Награды: 57


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

1.



2.


HTML

Код
<a class="coevens-olestagen" href="http://zornet.ru/" target="_blank" rel="nofollow noopener">ZorNet.Ru — сайт для вебмастера</a>

CSS

Код
.coevens-olestagen {
    color: #f9e1e1 !important;
    text-transform: uppercase;
    text-decoration: none;
    background: #c11b18;
    padding: 15px;
    border-radius: 3px;
    display: inline-block;
    border: none;
    transition: all 0.4s ease 0s;
}

.coevens-olestagen:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(31, 29, 29, 0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(31, 29, 29, 0.57);
box-shadow: 5px 40px -10px rgba(31, 29, 29, 0.57);
transition: all 0.4s ease 0s;
}


Также как заметили, что на светлом фоне отлично смотрится тень, что идет в самом низу элемента.

Демонстрация
Прикрепления: 5313945.png(5.0 Kb) · 1438016.png(8.3 Kb) · knudsa.zip(2.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Кнопка с простым и красивым эффектом CSS (Кнопка при наведение растягивается при помощи HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: