• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML коды для сайта » Кнопка виде пляжного мяча на чистом CSS (Этот стиль кнопки идет в оригинальной форме мяча)
Кнопка виде пляжного мяча на чистом CSS
Kosten
Дата: Понедельник, 2021-02-15, 20:21 | Сообщение 1
Оффлайн
Администраторы
Сообщений:31633
Награды: 65


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

При открытие:



Навели клик:



Установка:

HTML

Код
<button class="constany-cangin">ZorNet.Ru</button>

CSS

Код
.constany-cangin {
  -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;
}

button {
    font-family: 'Lobster', cursive;
    font-size: 16px;
    color: #fd6bff;
    width: 150px;
    height: 50px;
    border-radius: 50px;
    border: none;
    border-bottom: 0px solid #4e8bed;
    border-top: 0px solid #f5a733;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: 1s;
}

button:hover, button:focus {
    border-top: 25px solid #f5a733;
    border-bottom: 25px solid #4e8bed;
    height: 100px;
    width: 100px;
    background: white;
}

button:focus {
    outline: none;
    animation: bounce 2s infinite;
}

button:focus:before {
    width: 100px;
    height: 100px;
    transform: translateX(-15px) translateY(15px) rotateX(80deg);
    background: rgb(0,0,0);
    background: -moz-radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%);
    background: -webkit-radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%);
    background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#b8d3f0",GradientType=1);
    content: '';
    position: absolute;
    animation: shadow 2s infinite;
}

@keyframes bounce {
    33% {
  transform: translateY(-40px);
  height: 105px;
  width: 95px;
    }
    66% {
  transform: translateY(0px);
  height: 95px;
  width: 105px;
    }
    100% {
  transform: translateX(0px);
  height: 100px;
  width: 100px;
    }
}

@keyframes shadow {
    33% {
  transform: translateX(10px) translateY(55px) rotateX(80deg);
  width: 50px;
    }
    66% {
  transform: translateX(-40px) translateY(15px) rotateX(80deg);
  width: 150px;
    }
    100% {
  transform: translateX(-15px) translateY(15px) rotateX(80deg);
  width: 100px;
    }
}

Демонстрация
Прикрепления: 8795275.png(19.2 Kb) · 0437801.png(16.7 Kb) · beach-ball-css.zip(3.7 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML коды для сайта » Кнопка виде пляжного мяча на чистом CSS (Этот стиль кнопки идет в оригинальной форме мяча)
  • Страница 1 из 1
  • 1
Поиск: