Gomb formázása CSS-el (CSS button)

A HTML-el létrehozott gomb (button) CSS-el történő formázásáról lesz szó ebben a CSS tananyagban.

Gomb formázása CSS-el (CSS button) című cikk nyitóképe

Gomb formázása CSS-el (CSS button)

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.

Formázatlan gomb

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:

HTML kód

<input type="button" value="Gomb">
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Gomb színezése

Haladjunk szépen lassan lépésenként a gomb csinosítgatása során, először színezzük be a gombot.

CSS kód

background-color: yellow;
Code language: HTTP (http)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Jobban néz ki? Talán egy fokkal! De még mindig bűn ronda. Haladjunk tovább.

Gomb átméretezése

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.

CSS kód

font-size: 24px;
Code language: HTTP (http)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Padding hozzáadása

Adjunk hozzá egy kis padding-ot, hogy a szöveg ne töltse ki ennyire a gombot.

CSS kód

padding: 10px 20px;
Code language: HTTP (http)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Keret formázása

Változtassuk meg a keret színét és kerekítsük le a széleit.

CSS kód

border: #55555; border-radius: 10px;
Code language: HTTP (http)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Egér ráhúzás érzékelése

Adjunk hozzá egy effektet, hogy mi történjen akkor, amikor fölé húzzuk az egeret.

CSS kód

.button:hover { background-color: black; color:yellow; transition-duration: 0.5s; box-shadow: 2px 2px black; }
Code language: CSS (css)

Eredmény

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

Gomb benyomása

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.

CSS kód

.button:active { transform: translateY(5px); }
Code language: CSS (css)

Eredmény

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

Gomb letiltva

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.

CSS kód

opacity: 0.4; cursor: not-allowed;
Code language: HTTP (http)

Eredmény

>> 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!