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 
jsou 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: