Jak vytvořit tlačítko

Potřebujete na web vytvořit pěkné klikací tlačítko a nechce se vám ho malovat nebo kupovat? Můžete ho vytvořit v css.

Co je CSS

CSS, nebo také kaskádové styly jsou jakýmsi předpisem, jak se má vykreslit obsah psaný do html kódu. Jazyk html, to tlacitko-cssjsou jen odkazy, texty a obrázky se základním formátováním a právě CSS se dnes používá k nastavení toho, jaké písmo se má v odstavci použít, zda má být text odstavce zarovnán doprava nebo do bloku a jak se má vykreslit daný blok v rámci webu.

Vložit ho můžete:

  • přímo do html stránky zápisem: <style type=”text/css”>CSS kód</style>
  • vytvořit soubor (např. styly.css) a něm zapsat všechny definice stylů; na soubor pak z html souboru, kde je chcete použít odkážete značkou <link rel=”stylesheet” type=”text/css” href=”styly.css”> v sekci mezi <head>a </head>

K definici vlastností jednotlivých prvků v html dokumentu lze využít třídy a identifikátory.

  • třída (class) se v html kódu zapisuje např. <div class=”trida”> v CSS se zapisuje jako .trida
  • identifikátor (id) se v html píše způsobem <p id=”neco”> v CSS pak #neco

Třída nebo identifikátor pak má v CSS definici v podobě složených závorek. Její jednotlivé atributy jsou odděleny středníky. Vypadá to tedy například takto:

  • .trida {background:blue; font-size:14px;}

Jaké CSS vlastnosti použít na tlačítko

Barva textu

Jednoduchá značka, kterou nastavíte, jakou barvu má mít text uvnitř tlačítka. Využít můžete buď slovních definic v angličtině a nebo stupňů rgb.

  • color

Mezera textu od krajů tlačítka

Tento parametr udává, jak moc velké mají být okraje tlačítka kolem textu. Udává se v pixelech.

  • padding

Zaoblení rohů tlačítka

Tlačítko nemusí být hranaté – pokud nastavíte tuto hodnotu na více než 0px, můžete je mít úhledně zaobleny. Aby se tento parametr interpretoval správně ve všech prohlížečích, které ho znají, je ho potřeba zapsat třikrát (dosazení hodnoty je vždy stejné.)

  • -webkit-border-radius
  • -moz-border-radius
  • border-radius

Stín

Tato vlastnost je typická tím, že je ji potřeba zapsat třikrát – kvůli tomu, aby fungoval ve všech prohlížečích. Zápis se liší vždy jen názvem vlastnosti, její hodnoty se ale vždy zapisují zcela stejně. Jde o:

  • -webkit-box-shadow
  • -moz-box-shadow
  • box-shadow

Pozadí

Pozadím je myšlena vlastní barva tlačítka, tedy pozadí textu. Lze ji vyplnit buď souvislou barvou, a nebo barevným přechodem (viz níže). Jeho atributem je:

  • background

Přechod

Přechod je nastavení, jak se má vykrestlit plynulé překreslení z jedné barvy do jiné – například z modré do zelené. Dále se u tohoto atributu nastavuje, v jakém úhlu má být přechod veden a kolik procent plochy má zabírat která barva. Aby se korektně vykreslilo ve všech prohlížečích, je ho potřeba zapsat pětkrát (syntaxe všech tří atributů je totožná).

  • -moz-linear-gradient
  • -webkit-linear-gradient
  • -o-linear-gradient
  • -ms-linear-gradient
  • linear-gradient

Generátory

Kombinace všech těchto atributů a konečný vzhled odhadnout čistě z psaní kódu a jeho testování v náhledech je poměrně náročná záležitost. Naštěstí na webu existuje několik nástrojů, které vám umožní přímo nahlédnout na to, co se stane při změně kterého parametru a hotový kód pak zkopírovat přímo do css a html. Jedná se například o tyto online aplikace:

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *