Hiệu ứng hover div load text lên

 

**** HTML

<div class="hover-box-2">

    <span class="default-text">141.001 VNĐ</span>

    <span class="hover-text">Xem Đơn hàng</span>

</div>

**** CSS

.hover-box-2 {

    position: relative;

    overflow: hidden;

    /* width: 240px; */

    width: 180px;

    height: 50px;

    background: linear-gradient(135deg, #ffe4ec, #fff0f5);

    border-radius: 12px;

    text-align: center;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    margin: 0 auto;

    transition: transform 0.3s ease;

}

.hover-box-2:hover {

    transform: scale(1.03);

}

.hover-box-2 .default-text {

    top: 0;

    color: #444;

    opacity: 1;

}

.hover-box-2:hover .default-text {

    top: -100%;

    opacity: 0;

}

.hover-box-2 .hover-text {

    top: 100%;

    color: #e91e63;

    opacity: 0;

}

.hover-box-2:hover .hover-text {

    top: 0;

    opacity: 1;

}

.hover-box-2 .default-text, .hover-box-2 .hover-text {

    position: absolute;

    width: 100%;

    left: 0;

    transition: all 0.4s ease-in-out;

    line-height: 50px;

    font-size: 18px;

    font-weight: 600;

}