Background đẹp cho Giảm giá sản phẩm trong wordpress

Trong trang bán hàng thường có BOX giảm giá , nó thường làm rất bắt mắt , Hôm này tớ Share Backgroup đẹp cho Giảm giá sản phẩm – Backgroup 1 và 2 , Dự kiến sẽ có nhiều cái như thế nhé

Dù nhỏ nhưng rất hữu ích nhé.

Background đẹp cho Giảm giá sản phẩm trong wordpress

Vào việc luôn nhé , Bạn thấy 2 mẫu ở dưới , chỉ cần mở css dán vào là xong nhé

backgroup đẹp cho Giảm giá sản phẩm trong wordpress - Backgroup 1 — Background đẹp cho Giảm giá sản phẩm trong wordpress – Mẫu 1

Mã css :

/* giảm giá 1 - Flatsome.xyz share */
.badge-frame .badge-inner {
    color: #fff;
    border: 0;
}
.badge-frame {
    margin-left: 0px;
    background-image: url(https://banhangchatluong.net/wp-content/uploads/2021/10/saleoff.png);
    height: 49px;
    width: 50px;
}
.badge-container {
    margin: 0;
}
span.onsale {
    margin-top: -10px;
    position: absolute;
    margin-left: -18px;
    font-size: 16px;
}

Note : nhớ download hình này về nhé , còn lười thì để thế cũng được hj

backgroup đẹp cho Giảm giá sản phẩm trong wordpress - Mẫu 2 — Background đẹp cho Giảm giá sản phẩm trong wordpress – Mẫu 2

Css nè :

/* giảm giá 2 - Flatsome.xyz share */
.badge-container {
    margin-top: 0px;
}
.badge-frame .badge-inner {
    border: 0px;
		    width: 50px;
    height: 50px;
		transform: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+IDxwYXRoIGQ9Ik0yMS40MSAxMS41OGwtOS05QzEyLjA1IDIuMjIgMTEuNTUgMiAxMSAySDRjLTEuMSAwLTIgLjktMiAydjdjMCAuNTUuMjIgMS4wNS41OSAxLjQybDkgOWMuMzYuMzYuODYuNTggMS40MS41OC41NSAwIDEuMDUtLjIyIDEuNDEtLjU5bDctN2MuMzctLjM2LjU5LS44Ni41OS0xLjQxIDAtLjU1LS4yMy0xLjA2LS41OS0xLjQyek01LjUgN0M0LjY3IDcgNCA2LjMzIDQgNS41UzQuNjcgNCA1LjUgNCA3IDQuNjcgNyA1LjUgNi4zMyA3IDUuNSA3eiIgZmlsbD0iIzFhNzNlOCI+IDwvcGF0aD4gPC9nPjwvc3ZnPg==);
}

.badge-inner {
    color: #f1f1f1 !important;
}
.badge-frame {
    height: 50px;
    margin-left: -2px;
}
.badge {
    display: table;
    z-index: 20;
    pointer-events: none;
    height: 2.8em;
    width: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

Xem qua demo tại đây nhé https://banhangchatluong.net

Nhớ xem những cái hay ho tiếp theo tớ sẽ share nhé

Chúc các bạn thành công !