Linkgomb nyújtható háttérképpel

A link-felirat hosszától függően változó szélességű nyomógombokra lehet szükség. Ekkor nem érdemes a képeket minden méretben elkészíteni. Csak a legnagyobb szélességhez tartozó képeket készítjük el. A képek jobb széleit levágva külön fájlban tároljuk.

A linken belül elhelyezünk két általános tárolóelemet. Az elsőnek a hátterét a képek bal oldalai adják, és ide kerül a link-felirat is. Ezt a div-et osztályazonosítója segítségével formázzuk. A szélessége auto, így mindig annyi látszik belőle, amennyi az adott link-felirathoz szükséges.

A második div hátterét a háttérképek jobb szélei adják. Formázásához testvér elem kijelölőt használunk, így HTML kódunk egyszerű marad.

1. Példa:

Forráskód


<style>
a { display: block; margin: 10px; float:left; }
a .btn_div1 { height:53px; 
        background: url('kek_btn_bal_fent.png') no-repeat top left; 
        margin:0; padding: 12px 0 0 10px; display: block; float:left; 
        font:  bold 18px Verdana, Geneva, sans-serif; color:#ffffff;} 
a div + div { height:53px; width: 10px;  
        background:  url('kek_btn_jobb_fent.png') no-repeat top right; 
        margin:0; padding-left 10px; float:left; display: block;}  
a:hover .btn_div1 {  background: url('kek_btn_bal_lent_1.png') no-repeat top left;} 
a:hover div + div { background:  url('kek_btn_jobb_lent.png') no-repeat top right; } 
</style>     
….
<body>  
  <a href="#"><div class="btn_div1">Rövíd</div><div></div></a>
  <a href="#"><div class="btn_div1">Hosszabb</div><div></div></a>
  <a href="#"><div class="btn_div1">Még hosszabb</div><div></div></a>
</body>

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_link_gomb_din_hatterkeppel_02.html