Rugalmasan nyúló, kerekített sarkú gombok CSS-sel


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.

Verzió 1

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 nyúlni 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.

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

A következő 4db képre 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

példa gomb

Verzió 2

A cikk menet közben frissült, és Balatron küldött egy újabb kódot amivel ugyanezt a hatást lehet elérni de úgy, hogy közben nem kell képeket használni. Tehát a kód:

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
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<body>
<head>
<style>
.gomb{
text-decoration:none;
border: 1px solid black;
border-radius: 15px;
padding:3px 20px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.28, rgb(255, 255, 255)),
color-stop(1, rgb(181, 178, 177))
);
background-image: -o-linear-gradient(bottom, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
background-image: -moz-linear-gradient(bottom, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
background-image: -ms-linear-gradient(bottom, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
background-image: linear-gradient(to bottom, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
}
.gomb:active{
background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.28, rgb(255, 255, 255)),
        color-stop(1, rgb(181, 178, 177))
);
background-image: -o-linear-gradient(top, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
background-image: -moz-linear-gradient(top, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
background-image: -webkit-linear-gradient(top, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
background-image: -ms-linear-gradient(top, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
background-image: linear-gradient(to top, rgb(255, 255, 255) 28%, rgb(181, 178, 177) 100%);
}
</style>
</head>
<a class="gomb" href="#">GOMB</a>
</body>
</html>
Kapcsolódó bejegyzések:

A cikket beküldte: Tupacko (http://webpillango.org)

19 hozzászólás

  1. TrE says:

    Azt nem lehet megcsinálni, hogy ha lenyomom a gombot, akkor a szöveg ne “süllyedjen” lejjeb ?

  2. Tupacko says:

    Dehogy nem, van az a rész, hogy: padding: 6px 0 4px 18px; /* eltolja a szoveget */
    Ott azt vedd ki!

  3. Harder says:

    Jó leírás, köszönjük. :)

    Annyival kiegészíteném még, hogy az :active kódrészletek mintájára fel lehet venni pl. a :hover-t is, amivel egérfölévitelére új tulajdonsággal lehet felvértezni a gombot.

  4. Tupacko says:

    Szívesen :) A :hover-es dolog jó észrevétel (a WebPillangón is ott van egy kommentben :D). Lehet jobb lett volna, ha direkt menüként készül el a leírás és nem nyomógombként, menünek többen fogják használni (szvsz).

  5. lepke says:

    és azt hogyan tudom megcsinálni hogy ez a gomb, mint link valóban egy form submittjaként funkcionáljon?
    pl.: az uw-n rögtön fent a regisztrációs részben az ok az egy link, egy javascriptre mutat, de abból oly impotes vagyok, hogy nem tom hogy mi kéne nekem a js fájljából

  6. Tupacko says:

    Ha normál linkkel szeretnél elküldeni egy űrlapot, akkor nagyon hamar lebeszélnélek erről. Miért is? Ha nincs JS támogatása a látogatónak és te nem írod meg a normál HTML submit-tes dolgot, akkor nem tudja használni az ürlapot. Ha megoldod, hogy ha van JS, akkor azt hozza be, és ha nincs, akkor a statikus input-submit cuccot, akkor a megoldás, hogy beírod az “a” elem “href” paraméterébe, hogy: “javascript:document.a-formod-azonosítója.submit()”. Ez a legegyszerűbb módszer. Ha ellenőrzéseket is bele szeretnél rakni, akkor:
    http://www.willmaster.com/possibilities/archives/wmp20031230001.shtml
    http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

  7. zoleytaylor says:

    Tupacko, ezt a hozzászólásod nem értem. :D miért jobb a javascript űrlapelküldésre mint a normál html-be beépített megoldás? pl olyan esetekben ahol tudom hogy nem kell kliensoldalon ellenőrizni (pl beírni egy háromjegyű kódot, amit úgyis a szerver elemez, hogy helyes-e…).

  8. Tupacko says:

    Félre értesz. A normál link alatt a szószoros értelemben vett linket, hiperhivatkozást értem, ami nem tud csakis JS segítségével elkűldeni egy űrlapot. Nem az input elem submit típusára gondlotam. Szerintem ezt keverted össze.

  9. szega péter says:

    Azért annyira nem aktuális az “igenis új távlatokat nyit a weblapkészítésben” dolog, hiszen ezt a technikát Sliding Doors of CSS címmel már öt évvel ezelőtt olvashattuk az ALA-n: http://www.alistapart.com/articles/slidingdoors2/

    Másrészt még annyi megjegyzésem lenne, hogy én a spant tenném kívülre, és az a taget belülre, hiszen mégiscsak a spant arra találták ki, hogy container element legyen.

  10. Tupacko says:

    Persze, már régebben is volt ez, csak nem láttam még magyarul, bár a forrásom nem az ALA volt.
    Ha a span kívül van, akkor a kattintható felület megváltozik és nem lesz aktív az egész gomb. Nem beszélve arról, hogy nem minden böngésző támogatja alapból a :hover és az :active tulajdonságokat, bár igaz, ez különböző trükkökkel megoldható. A span inline konténer, úgyhogy az A tagban is jól van, nem tol el semmit (bár lehet nem valid, nem néztem).

  11. zoleytaylor says:

    tényleg azzal kevertem. vagyis én arra gondoltam alapból, de már világos.

    a span mindig valid, bármit tartalmazhat, inlájn és blokkszintű elemeket is, mivel ez az általános konténer ami nem örökölteti a stílusait. a div meg ugyanez, csak az az minden alárendelt elemre érvényessé tehető. vagy valami ilyesmi a különbség. lehet igazából semmi…

  12. Tupacko says:

    Hamarabb gond, ha az Aban van valami, mint hogy a SPANban :) Gondolom azért mondta Péter, hogy a SPAN legyen kivül.

  13. dewark says:

    Megoldható-e, hogy az így megadott gombot középre helyezzem? Nekem csak úgy sikerült, ha konkrét szélességet adtam neki:

    2
    3
    
    width: 100px;
    margin: 10px auto;

    Viszont az egész elveszíti az értelmét, ha a dinamikus hosszúságú gombnak szélességet adok.

    Van esetleg más megoldás is?

  14. zoleytaylor says:

    a szülőnek adj text-align: center;-t…

  15. Tupacko says:

    Édes mind1 a szülőnek mit adsz, mivel floatolva van. Középre igazítás floattal, nos erre egy jó cikk:
    http://www.muhelytitkok.com/41/css-floatleft-center/

  16. dewark says:

    Tupacko, köszönöm a leírást, ez az, amire szükségem volt.

  17. Balatron says:

    Frissíteném a kódot, mert van rá már újabb megoldás.
    Nem szükséges hozzá a kép, és kizárólag <a> elemből áll.
    Itt a kód

  18. Harder says:

    Köszi szépen a frissítést, kitettem a cikkbe is hogy szem előtt legyen.

Szólj hozzá
a Rugalmasan nyúló, kerekített sarkú gombok CSS-sel c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>