Skip to main content

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

Mục lục:

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
Custom Button Flatsome Slide Animation

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
tạo button trong flatsome

 

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;
}