• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Кнопка для сайта без углов с эффектом CSS (Оригинальный эффеккт для кнопок на сайте или блоге)
Кнопка для сайта без углов с эффектом CSS
Kosten
Четверг, 01 Августа 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Универсальная кнопка без углов но в со стильным эффектом, которая отлично подойдет на все сайты, как на темный или светлый формат. Так как она имеет эффект, который заключается в том, что при наведение появляется тень, что веб мастер самостоятельно настроит под свою стилистику.

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

Где по сути 2 эффекта, это тень под элементом, а также оттенок цвета под знаком, и все при наведение курсора.

1.



2.



HTML

Код
<a class="zornet-kigdsan" href="add-website-here" target="_blank" rel="nofollow noopener">Ключевое слово</a>

CSS

Код
.zornet-kigdsan {
    color: #fbefef !important;
    text-transform: uppercase;
    text-decoration: none;
    background: #29677d;
    padding: 18px;
    border-radius: 50px;
    display: inline-block;
    border: none;
    transition: all 0.4s ease 0s;
}

.zornet-kigdsan:hover {
text-shadow: 0px 0px 6px rgba(249, 245, 245);
-webkit-box-shadow: 0px 5px 40px -10px rgba(16, 16, 16, 0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(16, 16, 16, 0.57);
transition: all 0.4s ease 0s;
}


Опять же, эта кнопка полностью настраиваемая, поэтому вы можете редактировать ее любым удобным для вас способом.

Демонстрация
Прикрепления: 5184317.png (6.4 Kb) · 4648223.png (20.4 Kb) · Codeza.zip (2.5 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Кнопка для сайта без углов с эффектом CSS (Оригинальный эффеккт для кнопок на сайте или блоге)
  • Страница 1 из 1
  • 1
Поиск: