V CSS jsou pro „plastické“ rámečky připomínající vystupující či
zamáčknutá tlačítka k dispozici styly outset a inset.
Jejich základní použití vypadá následovně: nastavíte dotyčnému prvku určitou
barvu pozadí (zde jsem zvolil barvu o něco tmavší než pozadí stránky). Pro
rámeček použijete stejnou barvu a styl například outset.
definice by mohla vypadat například takto:
font-family: sans-serif; padding: 0.1em 0.5em; background-color: #85aec4; border: 3px outset #85aec4;
a výsledek:
Tlačítko
Problémem je, že zobrazení rámečku v plastickém stylu je čistě věcí klienta a z hlediska autora stránky je nepříliš předvídatelné. Proto řada autorů dává přednost ruční práci. Nechá rámeček vykreslit plnou čárou a plastického efektu docílí vhodnou volbou barev jednotlivých stran. Tučně vyznačený řádek z předchozí definice by při tomto přístupu byl nahrazen dvojicí:
border: 3px solid #85aec4; border-color: #9dcee8 #5b7784 #698999 #a7daf2;
která dá tlačítku následující vzhled, navíc totožný ve všech klientech podporujících CSS:
Tlačítko
zpět: CSS – okraje