[Thủ Thuật Flatsome] Tạo custom button slide animation

Với kiểu dáng này, nền của nút sẽ trượt khi hover vào button. Đó là một style tinh tế thay thế cho phiên bản mặc định nhàm chán của Flatsome

Image

Bước 1: Tạo một button với UX-Builder

Thêm một nút vào nơi mà bạn muốn với class là “btn-slide”và style là "Outline" .

Image

Bước 2 - Thêm Slyte CSS cho button

Thêm CSS dưới vào trong Flatsome advanced > Custom CSS hoặc thêm vào styles.css trong child theme của bạn

.btn-slide {
    display: block;
    position: relative;
    transition: all 1s cubic-bezier(0.42, 0, 0.58, 1);
    padding: 5px 15px;
}
.btn-slide {
    border: none;
    z-index: 1;
}
.btn-slide:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: #28bccd;
    transition: all 0.3s ease;
}
.btn-slide:hover {
    color: #fff;
}
.btn-slide:hover:after {
    left: 0;
    width: 100%;
}
.btn-slide:active {
    top: 2px;
}