دکمه، منو و کامپوننت‌های رایج

با چیزهایی که یاد گرفتی، کامپوننت‌های واقعی می‌سازیم.

دکمهٔ حرفه‌ای

.btn {
    padding: 10px 20px;
    background: #22d3ee;
    color: #05070d;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, background .2s;
}
.btn:hover { background: #67e8f9; transform: translateY(-2px); }

نوار ناوبری

.nav { display: flex; gap: 4px; }
.nav a {
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 8px;
    transition: .2s;
}
.nav a:hover { background: #22d3ee; }

منوی کشویی (ساده با :hover)

.dropdown:hover .menu { display: block; }
.menu { display: none; position: absolute; }

همین الگوها، نوار بالای سایت آرنا را ساخته‌اند. در پلی‌گراند منو را تغییر بده.