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. Az alábbi példában minden gomb megkapja ezt az effektet, ha nem szeretnéd ezt, akkor ismerkedj meg az osztályok fogalmával.
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 letiltása
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.
