• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Кнопки с оригинальным эффектом при клике (Кнопки CSS эффектом при нажатии на основу каркаса)
Кнопки с оригинальным эффектом при клике
Kosten
Дата: Среда, 2021-04-14, 12:28 | Сообщение 1
Оффлайн
Администраторы
Сообщений:37504
Награды: 65


Здесь представлены 2 кнопки, которые созданы под установку, это ставить плюс или минус. А также по своей структуре они отлично по своему стилю будут смотреться, как на темном формате, так и на светлом сайте.



HTML

Код
<div>
<button id="dekilasda" class="selected">Лайк</button>
<button id="lopedesamad">Дизлайк</button>
</div>

CSS

Код
button {
    border: none;
    height: 30px;
    width: 100px;
    border-radius: 10px;
    margin: 5px;
    font-size: 14px;
    cursor: pointer;
}

#dekilasda {
  background-color: #637081;
  background-image: linear-gradient(315deg, #637081 0%, #7c98b3 74%);
  color: white;
}

#lopedesamad {
    background-color: #b8c6db;
    background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
}

p {
    color: white;
    font-size: 30px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.3)
}

button:hover {
    filter: hue-rotate(40deg);
    transform: scale(1.1);
}

button:focus {
    outline: none;
    color: white;
    background-color: #f5d020!important;
    background-image: linear-gradient(315deg, #f5d020 0%, #f53803 74%)!important;
}

button:focus:hover {
    filter: hue-rotate(0deg);
}

Демонстрация
Прикрепления: 7968686.png(11.1 Kb) · like-dislike.zip(2.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Кнопки с оригинальным эффектом при клике (Кнопки CSS эффектом при нажатии на основу каркаса)
  • Страница 1 из 1
  • 1
Поиск: