Navigáció a honlap oldalain belül

A gombok a honlapon elsősorban különböző funkciókat látnak el, mivel segítik a navigálást. Gyakran használt gomb pl.: a “bővebben” “tovább” stb. Ha pl. fel akarjuk kelteni a felhasználó figyelmét, viszont szeretnénk ha részletekkel kapcsolatban egy másik oldalon tájékozódna, gombokat használunk. A gombok használata rendkívül széleskörű A funkció mellett azonban a gombok színének, a betűtípusnak és nagyságának esztétikai szerepe is van. Egyre gyakrabban használnak ikonokat, vagy szöveget és ikonokat együtt egy gombon. Az alábbiakban bemutatunk néhány fő gomb típust.

demo-screen

Példa egy gombra

Lorem Ipsum Doloe cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.

[button url=”#” target=”” size=”small” style=”skyblue” icon=”” popup=”” title=””]Bővebb információ[/button]

Egy gomb bármilyen színű lehet:

[button url=”#” target=”” size=”small” style=”alphagreen” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”autumn” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”black” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”bluegrey” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”buoyred” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”cherry” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”coolblue” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”coffee” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”forestgreen” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”frenchgreen” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”fire” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”golden” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”grey” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”limegreen” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”orange” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”periwinkle” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”pink” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”politicalblue” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”purple” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”royalblue” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”saffronblue” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”skyblue” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”steelgreen” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”silver” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”teal” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”tufgreen” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”tealgrey” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”violet” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”vistablue” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”small” style=”yogigreen” icon=”” popup=”” title=””]Bővebb információ[/button]

…és természetesen különböző méretű is:

[button url=”#” target=”” size=”small” style=”skyblue” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”medium” style=”skyblue” icon=”” popup=”” title=””]Bővebb információ[/button]
[button url=”#” target=”” size=”large” style=”skyblue” icon=”” popup=”” title=””]Bővebb információ[/button]

A gombokon akár ikonok is szerepelhetnek:

[button url=”#” target=”” size=”small” style=”skyblue” icon=”fa-cloud-download” popup=”” title=””]Fájl letöltése[/button]
[button url=”#” target=”” size=”small” style=”skyblue” icon=”fa-youtube-play” popup=”” title=””]Videó megtekintése[/button]
[button url=”#” target=”” size=”small” style=”skyblue” icon=”fa-calendar-o” popup=”” title=””]Naptár megtekintése[/button]
[button url=”#” target=”” size=”small” style=”skyblue” icon=”fa-facebook-square” popup=”” title=””]Lájkolj minket![/button]
[button url=”#” target=”” size=”small” style=”skyblue” icon=”fa-skype” popup=”” title=””]Hívjon minket Skype-on![/button]
[button url=”#” target=”” size=”small” style=”skyblue” icon=”fa-file-o” popup=”” title=””]PDF letöltése[/button]
[button url=”#” target=”” size=”small” style=”skyblue” icon=”fa-picture-o” popup=”” title=””]Galéria megtekintése[/button]
[button url=”#” target=”” size=”small” style=”skyblue” icon=”fa-envelope” popup=”” title=””]Üzenet küldése[/button]