Tvorba navigácie a tlačidiel pre webstránku

Úvod

Navigácia a tlačidlá sú kľúčové prvky každej webstránky. Správna navigácia zlepšuje použiteľnosť, tlačidlá zase umožňujú interakciu s používateľom. V tomto článku sa naučíš vytvoriť jednoduchú menu lištu a štýlované tlačidlá s HTML a CSS.

1. Základná navigácia

<nav>
    <ul class="menu">
        <li><a href="#home">Domov</a></li>
        <li><a href="#onas">O nás</a></li>
        <li><a href="#sluzby">Služby</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
    </ul>
</nav>
                

 .menu { list-style: none; display: flex; justify-content: center; background-color: #00796b; padding: 10px 0; margin: 0; }

.menu li {
margin: 0 15px;
}

.menu a {
text-decoration: none;
color: white;
font-weight: bold;
transition: color 0.3s;
}

.menu a:hover {
color: #ffeb3b;
}

 .button { background-color: #00796b; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; font-size: 16px; }

.button:hover {
background-color: #004d40;
}

 @media (max-width: 768px) { .menu { flex-direction: column; align-items: center; }
.menu li {
    margin: 10px 0;
}