WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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