Uncategorized
Css nút xem thêm
.title-line {
display: flex;
align-items: center;
justify-content: center;
}
/* chữ */
.title-line span {
background: #fff;
padding: 0 12px;
z-index: 2;
font-weight: 700;
white-space: nowrap;
}
/* line 2 bên */
.title-line::before,
.title-line::after {
content: “”;
flex: 1;
height: 3px;
margin: 0 10px;
background: linear-gradient(
to bottom,
#000 0px,
#000 1px,
transparent 1px,
transparent 2px,
#000 2px,
#000 3px
);
}
/* nút xem thêm sản phẩm */
.accordion-title {
display: flex;
justify-content: center;
align-items: center;
max-width: 260px;
margin: 20px auto;
border: 1px solid #8B0000; /* đỏ đô */
border-radius: 10px;
padding: 10px 20px;
color: #8B0000; /* chữ đỏ đô */
background: #fff; /* nền trắng */
font-weight: 500;
text-align: center;
transition: 0.3s;
}
/* hover KHÔNG đổi nền xanh nữa */
.accordion-title:hover {
background: #fff !important;
color: #8B0000 !important;
border-color: #8B0000;
}
/* ẩn icon mặc định */
.accordion-title i {
display: none !important;
}
/* đổi text */
.accordion-title span {
display: none;
}
.accordion-title::after {
content: “Xem thêm sản phẩm ▼”;
color: #8B0000;
}
/* khi mở */
.accordion-item.active .accordion-title::after {
content: “Thu gọn ▲”;
}
