✅ Как создать крутую анимированную кнопку?
Ниже вы найдете уже готовый HTML & CSS код, для создания анимированной hover кнопки. При наведении курсора, она плавно меняет сторону тени и цвет меняется на градиентный. Выглядит это эффектно и привлекательно. ⬇️
@code_ready | #практика #html #css
Ниже вы найдете уже готовый HTML & CSS код, для создания анимированной hover кнопки. При наведении курсора, она плавно меняет сторону тени и цвет меняется на градиентный. Выглядит это эффектно и привлекательно. ⬇️
<div class="main"><a href="#">Read More</a>
</div>
.main {
width: 170px;
height: 70px;
font-weight: bold;
font-size: 20px;
font-family: "Josefin Sans", sans-serif;
background-color: #fdcb6e;
cursor: pointer;
box-shadow: 5px 5px 0 0;
transition: 0.6s;
display: flex;
justify-content: center;
align-items: center;
min-height: 20px;
margin: 0 auto;
}
a {
position: absolute;
text-decoration: none;
color: #000;
z-index: 1000;
}
.main::after {
content: "";
top: 0;
left: 0;
width: 170px;
height: 70px;
background: linear-gradient(to right, #ff7675, #e84393);
opacity: 0;
transition: 0.8s;
}
.main:hover {
box-shadow: -5px -5px 0 0;
transform: scale(0.9);
}
.main:hover::after {
opacity: 1;
}@code_ready | #практика #html #css