Jak udělat hezká tlačítka a karty

Barvy, písmo i rozvržení už máte za sebou. Teď z obyčejných prvků uděláme dvě věci, které najdete skoro na každém webu: pěkné tlačítko a kartu (rámeček se stínem, do kterého se dává obsah). Obojí poskládáme z vlastností, které už znáte – jen je dáme dohromady tak, aby to vypadalo profesionálně.

Tlačítko: z obyčejného odkazu za chvíli

Tlačítko je většinou úplně obyčejný odkaz, kterému dáme třídu a pár vlastností. Začneme takhle:

<a href="#" class="btn">Odeslat</a>

.btn {
  display: inline-block;      /* aby fungovalo odsazení */
  background: #0f766e;        /* barva pozadí */
  color: #fff;                /* barva textu */
  padding: 12px 24px;         /* vnitřní odsazení = velikost */
  border-radius: 8px;         /* zaoblené rohy */
  text-decoration: none;      /* pryč s podtržením odkazu */
  font-weight: 600;
}

Nejdůležitější je display: inline-block – bez něj by u odkazu nefungovalo svislé odsazení. padding určuje, jak je tlačítko velké, border-radius zaoblí rohy a text-decoration: none schová podtržení. Výsledek:

Hover: ať tlačítko reaguje na myš

Hezké tlačítko se po najetí myší trochu změní. Přidáme :hover (co se stane při najetí) a transition (aby ta změna byla plynulá, ne skoková):

.btn {
  transition: background 0.2s;  /* plynulá změna za 0,2 s */
}
.btn:hover {
  background: #0b5d56;          /* tmavší odstín při najetí */
}

Karta: rámeček se stínem

Karta je jen box s odsazením, zaoblením a jemným stínem – skvělá na službu, článek nebo referenci. Obsah dáte dovnitř:

<div class="card">
  <h3>Nadpis karty</h3>
  <p>Krátký popisek uvnitř karty.</p>
</div>

.card {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

Kouzlo dělá box-shadow. Čísla znamenají: posun doprava, posun dolů, rozmazání a barvu stínu. To rgba(0,0,0,0.08) je černá s průhledností 8 % – proto je stín jemný a ne tvrdý. Výsledek:

Karty vedle sebe

Víc karet dáte do řady jedním řádkem – obalíte je do boxu s display: flex a mezerou gap. Díky flex-wrap: wrap se na mobilu samy zalomí pod sebe:

.karty {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

Je to přesně ten flexbox z návodu o rozvržení – jen použitý na karty. Víc o přizpůsobení mobilu najdete v návodu Web, který funguje na mobilu.

Časté chyby

• Zapomenutý display: inline-block u tlačítka. Pak se svislé odsazení chová divně a tlačítko „přetéká".
• Moc silný stín. Tvrdý tmavý stín vypadá těžkopádně – držte se jemného, s průhledností (nízké poslední číslo v rgba).
• transition dané do :hover místo na základní stav. Přechod pak funguje jen při najetí, ne při odjetí.
• Špatný kontrast. Světlý text na světlém tlačítku se špatně čte – tmavé pozadí + bílý text je sázka na jistotu.
• Nejednotný styl. Zvolte si jedno zaoblení a jeden styl stínu a používejte je všude – web pak působí sladěně.

A to je celé. Tlačítko i kartu teď složíte z pár řádků a mícháním těch samých vlastností (odsazení, zaoblení, stín, hover) vytvoříte prakticky jakýkoli UI prvek. 👍