Scribd
Upload
7 views4 pages

HTML Sapxep

Uploaded by

tn908261
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views4 pages

HTML Sapxep

Uploaded by

tn908261
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML

<!DOCTYPE html>

<html lang="vi">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sort Buttons</title>

<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/


all.min.css">

</head>

<body>

<div class="sort-container">

<div class="sort-title">Sắp xếp theo</div>

<div class="sort-options">

<button class="btn sort-btn active">

<i class="fas fa-sort-amount-down"></i> Giá Cao - Thấp

</button>

<button class="btn sort-btn">

<i class="fas fa-sort-amount-down"></i> Giá Thấp - Cao

</button>

<button class="btn sort-btn">

<i class="fas fa-percent"></i> Khuyến Mãi Hot

</button>

<button class="btn view-more-btn">

<i class="fas fa-eye"></i> Xem nhiều

</button>

</div>
</div>

</body>

</html>

CSS
.sort-container {

display: flex;

flex-direction: column;

align-items: flex-start;

margin-top: 20px;

.sort-title {

font-size: 40px;

font-weight: bold;

margin-bottom: 20px;

.sort-options {

display: flex;

gap: 20px;

align-items: center;

.btn {

align-items: center;

padding: 8px 16px;


border-radius: 20px;

border: 1px solid #ddd;

color: #333;

font-size: 14px;

width: 200px;

text-align: center;

.btn i {

margin-bottom: 5px;

.btn:hover {

background-color: #e0e0e0;

.sort-btn {

border-color: #ddd;

background-color: #f5f5f5;

.view-more-btn {

border-color: #ff4d4f;

color: #ff4d4f;

background-color: white;

.view-more-btn:hover {

background-color: #ffe6e6;
}

.active {

background-color: #f5f5f5;

border-color: #ddd;

You might also like