پیشنمایش زنده
کد HTML
<div class="main-section">
<button class="first-button"> Hover Me </button>
<button class="second-button"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="#ffd300" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg> Add To Cart</button>
</div>
کد CSS
.first-button {
background: rgb(115, 15, 209);
color: #fff;
border: none;
font-weight: 700;
font-size: 1em;
min-height: 60px;
width: 200px;
gap: 20px;
display: flex;
align-items: center;
justify-content: center;
transition-duration: 0.6s;
}
.main-section {
display: flex;
flex-direction: column;
height: 60px;
overflow: hidden;
align-items: flex-start;
}
.main-section:hover .second-button , .main-section:hover .first-button {
transform: translateY(-60px);
}
.second-button {
background: rgb(209, 15, 57);
color: #fff;
border: none;
font-weight: 700;
font-size: 1em;
min-height: 60px;
width: 200px;
gap: 20px;
display: flex;
align-items: center;
justify-content: center;
transition-duration: 0.6s;
}