logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

Képes nyomógomb kialakítása



A linkek vizsgálatánál már megtanultunk háttérképek segítségével nyomógombot készíteni. Most ugyanúgy járunk el, de egy input nyomógomb esetén.

Példa:

Forráskód



<style>
....
form input[type="submit"]  
   { display: inline-block; background: transparent url(btn_zold_42.png); 
     font-size:18px; height:42px; width:115px; padding:0; border : none;
     text-align:center; color:#ffffff;  }
form input[type="submit"]:hover 
   { background: url(btn_zold_felett_42.png); padding:0; height:42px;}
form input[type="submit"]:active 
   { background: url(btn_zold_lent_42.png); padding-top: 2px; height:42px;}
.submit{ text-align:center;}
</style>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_urlap_nyomogomb_01.html


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.