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