• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML коды для сайта » Кнопка с мигалкой для сайта на HTML + CSS (Оригинальная кнопка с маяком по вверх с помощью CSS)
Кнопка с мигалкой для сайта на HTML + CSS
Kosten
Дата: Суббота, 2021-02-06, 01:52 | Сообщение 1
Оффлайн
Администраторы
Сообщений:31744
Награды: 65


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



Установка

HTML

Код
<button class="kloped_samunsa">ZORNET.RU</button>

CSS

Код
.kloped_samunsa {
  -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 {
    width: 164px;
    height: 56px;
    cursor: pointer;
    font-size: 18px;
    font-family: 'Staatliches', cursive;
    letter-spacing: 5px;
    background: #ffbf0d;
    border: 2px solid black;
    box-shadow: 0px 0px 0px rgb(25 23 23 / 50%);
    transition: 500ms;
}

button:after {
    content: '';
    position: absolute;
    transform: translateX(-55px) translateY(-40px);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0px 0px 50px transparent;
    transition: 500ms;
}

button:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 10px rgba(0,0,0,0.4);
}

button:hover:after {
    background: #f3e8e8;
    box-shadow: 0px 0px 20px #ecb315, 0px 0px 30px #f3b60d, inset 0px 0px 10px #e6ae13;
    animation: spin 1s infinite linear;
}

@keyframes spin{
    25%{transform: translateX(-25px) translateY(-35px);
   width: 15px;
   height: 15px;}
    50% {transform: translateX(-55px) translateY(-30px);
   width: 5px;
   height: 5px;}
    75% {transform: translateX(-85px) translateY(-35px);
   width: 15px;
   height: 15px;}
}

button:focus {
    outline: none;
}

Здесь также присутствует еще один эффект, это когда она немного поднимается, и появляются тени, а по вверх мигание происходит, что на темном формате сайта интересно наблюдать.

Демонстрация
Прикрепления: 5972161.png(21.9 Kb) · wakesa.zip(3.2 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML коды для сайта » Кнопка с мигалкой для сайта на HTML + CSS (Оригинальная кнопка с маяком по вверх с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: