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.

Tartalomjegyzék

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Ó CIKKEKTÖBB A SZERZŐTŐL

19 HOZZÁSZÓLÁS

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

  3. 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. 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. é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. 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. 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. 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. 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. 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. 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. Hamarabb gond, ha az Aban van valami, mint hogy a SPANban :) Gondolom azért mondta Péter, hogy a SPAN legyen kivül.

  13. 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?

  18. 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

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét