Dinamikus gomb készítése CSSt használva

Írta: Tupacko | 2008. január 13. | kategóriák: (X)HTML, CSS, Design

Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben. A következő leírásban egy ilyen szerű gomb elkészítéséről lesz szó. Először elmondanám, hogyan is működik a gomb, milyen elmélet alapján, majd a szükséges kódot is közzéteszem.
Az ötlet az, hogy ne legyen egy statikus háttér, amiről lefuthat a szöveg, ha éppen hosszabb, mint a kép maga. Persze ezt elméletben ne lehet tökéletesen kiküszöbölni, még szerencse, hogy a gyakorlati világban élünk. A háttér dinamikus szélességét annak köszönhetjük, hogy a linkekbe nem a szöveget helyezzük, ahnem egy span elemet, ami tartalmazza a szöveget, így valójában két hátterünk van: egy nyitó, ami nyulni is fog, ahogy a szöveg egyre hosszabb (persze csak egy pontig, de mivel mi határozzuk meg, nem okoz gondot) és egy záró háttér, amely lezárja az első háttér végét, így egységes megjelenést biztosít.

<a href="#" class="gomb"><span>a link cime</span></a>

A következő képekre lesz szükség a bemutatott példához:

A span elem háttere Az a elem háttere

Az aktív span elem háttere Az aktív a elem háttere

A linket a következő CSS kód formázza gombszerűvé:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

a.gomb {
background: transparent url('normal-a-bg.gif') no-repeat top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* a masik hatter tolasa */
text-decoration: none;
}
 
a.gomb span {
background: transparent url('normal-span-bg.gif') no-repeat top left;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
 
a.gomb:active {
background: transparent url('aktiv-a-bg.gif') no-repeat top right;
color: #000;
outline: none; /* Firefox fix */
}
 
a.gomb:active span {
background: transparent url('aktiv-span-bg.gif') no-repeat top left;
padding: 6px 0 4px 18px; /* eltolja a szoveget */
}

példa gomb

Gondlom elég érthető, hogyan működik :) Ezen kivül több módszer is létezik, de talán ez a legegyszerübb: minek komplikálni a dolgokat, ha egy a végeredmény?

Share
Delicious


Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Köszi szépen!

Viszont észrevettem valamit:
Ha a gombon nyomvatartod az egeret, majd lehúzod róla, és ott engeded el, akkor beragad a lenyomott állás?
Ez javítható valahogy?

DeX 2008. január 14. - 23:53

Valóban így van, ez sajnos egy CSS hiba … bármely más linknél is fennáll az említett gond. Jó az észrevétel! Ha gondlod egy orvoslás az, ha nem az active modosítót használod, hanem a hover-t. Így viszont változik a gomb hatás élmény.

Avatar Tupacko
2008. január 15.
00:08

… a WordPress által kilistázott oldalakat/kategóriákat formázom menüként …

[Wordpress menü SPAN hack] 2008. január 15. - 21:45

Nemtudom. Nekem valamiért nemakar működni :S Megcsináltam amit írtatok de sajnos a linket mármint az írást rá félrehúzza. :S

TomyMC 2009. augusztus 17. - 15:25

Nah Most sikerült. csak rossz volt a háttér :)

TomyMC 2009. augusztus 17. - 15:26

Orulok, hogy vegulis mukodott a dolog :)

Avatar Tupacko
2009. augusztus 17.
15:35

Nemtudtok valami jó kis scriptet a honlapomhoz ami ilyen híreket mutat ki? Mert a honlapomat ma terveztem meg és kéne rá hír cucc :) És nem akarok mindig szerkeszteni stb.. Ha van szóljatok :P

TomyMC 2009. augusztus 17. - 20:58

Van RSS hircsatorna … widgetem nincs. A cikkhez nem tartozo dolgokkal nagyon szivesen latunk a forumon: http://forum.webpillango.org/

Avatar Tupacko
2009. augusztus 17.
21:15

Szia!

Nagyon tetszik a kódod, viszont egy teljesen triviális dologgal nem boldogulok, mégpedig a középre rendezéssel. Ha azt szeretném, hogy a gomb egy doboz közepén legyen, egyszerűen nem teszi oda.

Próbáltam így:
 BŐVEBBEN 

Meg -rel is.

Mit javasolsz?

Előre is köszi!

Gyuri 2009. szeptember 24. - 12:02

<div align="center">&nbsp;<a href="#" class="gomb"><span>BŐVEBBEN</span></a>&nbsp;</div>

meg így is:
<div style="text-align:center;">

Gyuri 2009. szeptember 24. - 12:03

Szia.
Mivel float van a gombon, igy az balra van igazitva. Egy lehetseges megoldas, ha egy plusz dobozba teszed. Ezen belul megakadalyozod a gomb kicsuszasat, clear CSS paranccsal, es fix szelesseget adsz neki. Majd ezt a dobozt oda tolod, ahova szukseges. Nem vagyok szamitogep kozelben, nem tudom kiprobalni. Remelem sikerrel jarsz.

Avatar Tupacko
2009. szeptember 24.
15:06

Köszönöm a gyors választ! Nos clear nélkül is működik, csak mégegy dobozba kell tenni fix szélességgel (ahogy írtad). Így csináltam:
<div align="center"><div style="width:80px;"><a href="#" class="gomb"><span>BŐVEBBEN</span></a></div></div>

ui.: Azért ha van tipped a fix paraméter elhagyására az jó lenne, mert akkor továbbra is lehetne dinamikus gombként használni!

Köszönöm mégegyszer!

Gyuri 2009. szeptember 24. - 16:01

Szivesen. Orulok, hogy sikerult. A clear nelkuli megoldas nem biztos, hogy minden bongeszoben megallja a helyet. Sajnos nem tudok altalanos megoldast floatolt elemek kozepre igazitasahoz. Googlet probaltad? Hatha segit. Van par otletem, de telefonon nehezkes lenne kiprobalni.

Avatar Tupacko
2009. szeptember 24.
19:52

Szerintem nem nagyon gond a beragadt gomb.Az a legkevesebb.Hiszen nem ezt nézik a felhasználók hanem várják hogy a következő lap bejöjjön.Már ha van persze.

Lurvig 2009. október 27. - 20:55

Ez is benne van a pakliban :)

Avatar Tupacko
2009. október 27.
21:33

Igen, ez valóban szép megoldás. És sokkal jobb, mintha JavaScriptet használnánk, mert gyorsabb és egyszerűbb is. És persze már a betöltéskor jól néz ki.

Weblap.ro 2010. február 14. - 14:37