hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu it hu hu ceb hu en hu hu hu hu cs en hu hu hu hu cs en hu hu hu hu hu cs en hu hu hu hu cs en hu hu hu hu cs en hu hu hu hu cs en hu hu hu hu hu cs en hu hu hu cs hu cs en hu hu hu hu hu hu es es es tr en hu hu hu hu hu hu hu hu hu fr hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
Gomb formázása CSS-el (CSS button) - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
A HTML-el létrehozott gomb (button) CSS-el történő formázásáról lesz szó ebben a CSS tananyagban.
Valljuk be őszintén, hogy egy formázás nélkül létrehozott gomb (button) nem néz ki valami jól. Szerencsére CSS-el csodákra lehetünk képesek. (Bár sokszor ennél jóval kevesebb is elég.) Ebben a cikkben lépésről lépésre végigvesszük egy gomb formázási lehetőségeit. Megváltoztatjuk a színét, a méretét, teszünk rá gombnyomás effektet és hasonló finomságokat.
Annak aki esetleg nem tudná, hogy hogy hogy néz ki egy formázás nélküli gomb, annak itt a lehetőség, hogy megtekintse:
Code language: HTML, XML (xml)
Haladjunk szépen lassan lépésenként a gomb csinosítgatása során, először színezzük be a gombot.
background-color: yellow; Code language: HTTP (http)
Jobban néz ki? Talán egy fokkal! De még mindig bűn ronda. Haladjunk tovább.
Az előző változtatást (szín) meghagyom, hogy jobban lehessen látni, hogy mit érhetünk el a CSS segítségével, ha gomb formázásról van szó. Most pedig változtassuk meg a méretét, hátha egy picit jobban fog kinézni.
font-size: 24px; Code language: HTTP (http)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Adjunk hozzá egy kis padding-ot, hogy a szöveg ne töltse ki ennyire a gombot.
padding: 10px 20px; Code language: HTTP (http)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Változtassuk meg a keret színét és kerekítsük le a széleit.
border: #55555; border-radius: 10px; Code language: HTTP (http)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Adjunk hozzá egy effektet, hogy mi történjen akkor, amikor fölé húzzuk az egeret.
.button:hover { background-color: black; color:yellow; transition-duration: 0.5s; box-shadow: 2px 2px black; } Code language: CSS (css)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A hover jelenti azt, hogy a benne foglalt dolgoknak akkor kell megtörténnie, amikor éppen fölé húzzuk az egeret. A background-color-ral a háttérszínt állítjuk feketére, a color-ral a szövegszínt sárgára, a transition-duration szabja meg, hogy 0.5 másodpercig tartson a két design között az átmenet és a box-shadow készíti el az árnyékot a gomb köré.
Most, hogy szépen beállítottuk, hogy hogyan nézzen ki a gomb megnyomás előtt, állítsuk be, hogy hogyan nézzen ki megnyomás után.
.button:active { transform: translateY(5px); } Code language: CSS (css)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A transform: translateY(5px); utasítással beállítjuk, hogy eltolja a gombot Y irányba 5 pixellel a megnyomás hatására.
Legutolsó lépésként megmutatom, hogy hogyan tilthatunk le egy gombot vizuálisan. Azaz, hogyan formázhatjuk egy gomb kinézetét úgy, hogy úgy tűnjön, mintha le lenne tiltva.
opacity: 0.4; cursor: not-allowed; Code language: HTTP (http)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Az opacity: 0.4; beállítással adjuk meg, hogy mennyire legyen átlátszó a gomb, ez adja a gomb szürkeségét. A cursor: not-allowed; állítja át a kurzor ikonját abban az esetben ha ráhúzzuk a gombra.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
CSS alapok (A CSS alapjainak összefoglalója)
CSS használatának, csatolásának módszerei
CSS hivatkozások, linkek formázása (HTML a elem formázása CSS segítségével)
#button #CSS #css button #css gomb #css kezdőknek #css magyar #css magyar nyelven #CSS programozás #css webprogramozás #gomb #magyar css #webfejlesztés #webprogramozás alapjai #webprogramozás alapok
Mi az a CSS? A CSS bemutatása
Mi az a CSS kijelölő, azaz szelektor? (CSS selector használata)
A legfontosabb, legalapvetőbb CSS parancsok, utasítások
CSS használatának, csatolásának módszerei
A CSS használata [CSS használati útmutató]
CSS komment, azaz megjegyzés használata (CSS comments)
Színek használata CSS segítségével (CSS colors)
Szövegszín beállítása CSS-ben (CSS color)
CSS háttérszín beállítása (CSS background-color)
CSS színátmenet (Lineáris és sugárirányú CSS gradient)
CSS háttérkép beállítása (CSS background-image)
Dőlt betű beállítása CSS-el (CSS italic)
Szöveg aláhúzás CSS segítségével (CSS underline)
CSS szövegformázás (Szövegszín, szövegigazítás, szövegátalakítás, szövegdekoráció, szövegárnyék, szöveg háttér)
CSS keretek, szegélyek használata (CSS border)
CSS margó beállítása (CSS margin)
CSS alapok (A CSS alapjainak összefoglalója)
CSS padding használata (CSS padding magyarul)
CSS hivatkozások, linkek formázása (HTML a elem formázása CSS segítségével)
CSS táblázat formázás (CSS table)
Gomb formázása CSS-el (CSS button)
CSS képigazítás (Kép igazítása középre, balra, jobbra CSS-el)
Reszponzív weboldal készítése (Viewport és CSS Media Query)
CSS pozíció (abszolút, relatív, rögzített, statikus, ragadós)
Mi az a z-index és hogyan kell használni?
CSS float használata (CSS úsztatás, lebegés)
CSS szélesség, magasság (width, height, max-width, max-height, min-width, min-height)
CSS fonts (betűkészlet, betűtípus, betűvastagság)