Để làm chuyển động , hiệu ứng màu gradient trong wordpress chỉ vài thao tác đơn giản mà ko phải ai cũng biết , Hôm nay tớ giới thiệu cách tạo nút gradient trong flatsome wordpress bằng css nhé
Cách tạo nút gradient trong flatsome wordpress
Thống kê bài viết
Xem qua hình để biết các nút chuyển động ntn có nên đưa vào web của bạn không rồi quyết định nhé
( link Sidebar )
CÓ THỂ BẠN QUAN TÂM
- LightBox Flatsome – cách shortcode lightbox trên theme flatsome 09/2023
- WP Content Crawler – cách lấy hình Lazy-loading images về web wordpress 09/2023
- Cách đăng ký VPS Google Cloud hoàn toàn Free không cần thẻ Visa 09/2023
- Hướng dẫn tăng điểm google pagespeed insights lên xanh 09/2023
- Vietnix giảm giá 50% TRỌN ĐỜI dịch vụ Hosting 09/2023
- Thêm font mới cho theme flatsome wordpress 09/2023
Ví dụ ta có mã html sau
|
1 |
<span id="lienhe" class="top-header-span animated-linear-gradient"> LIÊN HỆ MUA HÀNG</span> |
Sau khi bạn thêm vào trên web vị trí bất kỳ có hộ trợ html nhé
sau đó chỉ cần thêm css sau là ok
|
1 2 3 4 |
/*Liên hệ mua hàng*/ .animated-linear-gradient{background:repeating-linear-gradient(to right,red 0,#00f 50%,red 100%);width:100%;background-size:200% auto;background-position:0 100%;animation:gradient 2s infinite;animation-fill-mode:forwards;animation-timing-function:linear;padding:10px;border-radius:9999px; color: #f3f3f3;} @keyframes gradient{0%{background-position:0 0} 100%{background-position:-200% 0}} |
Dòng theo class trước là để định dạng , dòng @keyframes gradient để lặp lại hành động đó
Chúc bạn thành công nhé
Pingback: Cách tạo nút gradient trong flatsome wordpress - FLATSOME - FREE EVERY THING