Оригинальный эффект для кнопки, где по вверх ее расположена мигалка, что можно сделать для предупреждение или можно сделать для уникального обзора. Ведь она по умолчанию не сильно от стандарта отличается, но все таки есть свои секреты. Это безусловно мигалка, которая не просто тухнет и опять загорается, а также крутиться по горизонтальной линии.
Установка
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;
}
Здесь также присутствует еще один эффект, это когда она немного поднимается, и появляются тени, а по вверх мигание происходит, что на темном формате сайта интересно наблюдать.
Демонстрация
