• Страница 1 из 1
  • 1
Кнопка для сайта с наклонным эффектом CSS
Kosten
Среда, 03 Февраля 2021, 20:11 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Здесь видим кнопку, где при наведении кнопка идет в наклоне, что сильно отличается от стандартных эффектов. Также автоматически происходит тестовой эффект, где светлая гамма отходит от тени.



HTML

Код
<button class="gsamo-kulas vedemudsa"><span>
ZORNET.RU</span></button>


CSS

Код
.vedemudsa {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.gsamo-kulas {
    width: 150px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e22b75;
    background-image: linear-gradient(
315deg
, #e42773 0%, #f55d4d 74%);
    border: 1px solid #496077;
    color: #f5f0f0;
    transform: rotateX(
30deg
);
    box-shadow: inset 0 15px 10px rgb(16 16 16 / 10%);
    transition: 1s;
}

.gsamo-kulas span {
    transform: translateY(-5px);
    text-shadow: 0 15px 3px rgba(0,0,0,0.4);
    transition: 1s;
}

.gsamo-kulas:hover {
    color: #eee;
    box-shadow: inset 0 -15px 10px rgba(0,0,0,0.1);
    transform: rotateX(-30deg);
}

.gsamo-kulas:hover span {
    transform: translateY(5px);
    text-shadow: 0 -15px 3px rgba(0,0,0,0.4);
}

button:focus {
    outline: none;
}

Такой стиль цвета отлично смотреться на темном или светлом формате сайта.

Демонстрация
Прикрепления: 3753260.png (25.4 Kb) · tilted-css.zip (2.8 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: