Очень интересный эффект смены оттенки цвета, что произойдет с наведением курсора на основной каркас анимированной кнопки. По умолчанию она идет в светлой гамме, где после чего нам нужно сделать клик скачать или перейти. И здесь вы только навели, то по обе стороны появляются 2 темно светлых круга, которые сталкиваются по центру, и после светлой палитры, эта аналогичная кнопка становится темной. Здесь само интересное изменение, что на других вариантах не разу не встречал.
При открытие страницы:
Здесь наведен клик, но лучше на demo странице его, как анимацию рассматривать.
HTML
Код
<button class="miconve-sionson"><span>ZorNet.Ru</span></button>
CSS
Код
.miconve-sionson {
-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: 150px;
height: 50px;
cursor: pointer;
border: none;
border-radius: 5px;
background: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
button span {
color: black;
transition: 1s;
}
button:before, button:after {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 25px;
background: transparent;
z-index: -1;
transition: 500ms;
}
button:before {
transform: translateX(-90px);
}
button:after {
transform: translateX(90px);
}
button:hover:before, button:hover:after {
background: black;
transform: translateX(0px);
animation: expand 500ms 500ms ease forwards;
}
button:hover span {
color: white;
}
button:focus {
outline: none;
}
@keyframes expand{
to{
height: 50px;
width: 150px;
border-radius: 5px;
}
}
Установочный процесс завершен.
Демонстрация
