Ha valaki szorgosan követi Fejlesztés rovatunk bejegyzéseit, minden bizonnyal nem ma találkozik majd először a CSS kódok használatának előnyeivel. Annak idején mutattunk például egy olyan oldalt, amelyről CSS kódként (is) tölthetők le testreszabható mintázatok, hogy azokat egyszerűen és gyorsan használhassuk fel bármilyen weboldal háttereként. Ma egy hasonló megoldással szolgálunk, amellyel egy látványos gomb készítése weboldalra CSS kóddal oldható meg. Ezt aztán gond nélkül beilleszthetjük akár egy szimpla HTML alapú oldalra is.
Látványos gomb készítése weboldalra CSS kóddal: ingyenes megoldások
Természetesen gombokat készíthetünk Photoshopban vagy bármilyen képszerkesztő szoftverben, hogy azokat PNG, JPG vagy épp WebP formátumban elmentve illesszük készülő weboldalunkra. Ám sok esetben praktikusabb, ha a gombot egyszerű HTML kódként hozzuk létre, s CSS (Cascading Style Sheets) kód segítségével igazítjuk annak megjelenését az igényeinkhez.
Bár sokak számára talán idegennek tűnik ez a megoldás, bizony meglepően összetett és látványos formázási lehetőségek állnak rendelkezésre egy gomb stílusának, megjelenésének meghatározására. Az alábbiakban erre a feladatra mutatunk néhány olyan ingyenes, online eszközt, amelyekkel tovább egyszerűsíthetjük a dolgunkat azáltal, hogy a leendő gombot egy kényelmes felületen tervezhetjük meg, majd onnan másolhatjuk ki a kész CSS kódrészletet.
- CSS button creator: Ez az eszköz leginkább azoknak lesz jó választás, akiket vonz a retró életérzés. Persze modern gombokat is összeüthetünk vele, de leginkább a kissé 3D-s, árnyékokkal megtűzdelt, hagyományos forma- és színvilág az, amelyet könnyedén megalkothatunk vele. Cserébe viszont a Hover-effektet is megtervezhetjük, így teljesen interaktív lesz a végeredmény.
- HTML/CSS button generator: Ez a kedvencünk a három közül. Modern, a végtelenségig testreszabott gombokat lehet vele tervezni. Még a sarkok egyenkénti lekerekítése is megoldható. Természetesen azért itt sem maradt ki az árnyékolás lehetősége, de itt még sablonokat is kapunk ehhez: egy kattintás az Apple vagy a Google iránymutatásainak megfelelő árnyékot festeni gombunk köré. De persze manuálisan is beállíthatunk mindent. Itt is van Hover-effekt, vagyis a gomb fölé mozgatott egérkurzor esetére is tervezhetünk külön látványvilágot, akár állítható sebességű animált váltással is. A gombokat ikonokkal is kiegészíthetjük.
- CSS button generator.com: Végül egy szintén nagyszerűen sikerült megoldás, amely amelyben ugyancsak aprólékosan beállíthatunk minden jellemzőt. Ám ha épp sietünk, abban is segít, merthogy egy halom igényes sablonból választhatunk, egyetlen kattintással. Ezeket aztán tovább gyúrhatjuk a szerkesztőben, hogy a végeredmény pontosan olyan legyen, amilyenre szükségünk van.
Ezek tehát a – jelenleg – legjobb olyan online eszközök, melyekkel pillanatok alatt, teljes kényelemben kreálhatunk új gombokat leendő weboldalainkhoz. Használatuk egyszerű, bármely rendszeren és böngészőben működnek, s teljesen ingyen állnak bárki rendelkezésére. Még csak regisztrációra sincs szükség a használatukhoz.
