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

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

/* 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;