24.3. fejezet: CSS alapismeretek – Nyomógombok
A helyes gombok használata feldobhatja a weblapot. Vegyünk példaként egy alapértelmezett és egy „kizöldült” nyomógombot.
Forráskód: (htmlpelda55.html)
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS Gombok</h2>
<button>Alap gomb</button>
<a href="#" class="button">Link gombja</a>
<button class="button">CSS gomb</button>
<input type="button" class="button" value="Input Button">
</body>
</html>
Nézzük a tulajdonságokat darabonként:
- background-color: a gomb háttérszíne (itt zöld)
- border: keret (itt: 0)
- color: szövegszín (itt: fehér)
- padding: helyhagyás (itt: elég sok lett)
- text-align: szöveg igazítása (itt: középre)
- text-decoration: szöveg díszítése (itt: semmi)
- display: képernyőn való megjelenés (itt: egy sorban)
- font-size: betűméret (itt: 16 képpont)
- margin: margók (itt: 4 és 2 képpont)
- cursor: egérmutató alakja (itt: a megszokott kurzor alakú)
Érdemes játszani például a gombok vagy a feliratok méretével (is), de csak a színek után.
Persze itt is lehetőség nyílik a gombok megfelelő lekerekítésére. (htmlpelda56.html)
És a forráskód:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: green;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
<h2>Kerek gombok</h2>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>
Ha már a színeknél tartunk, akkor megér egy próbát a gombok keretének kiszínezése. Az alábbi kódrészlet például fehér hátterű, fekete szövegű és zöld keretű gombot hoz létre:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
Érdekes ötlet a :hover tulajdonság használata, ugyanis ilyenkor a gomb teljesen átparaméterezhető, amikor az egér föléje ér. A mintaként használható kódrészlet:
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
További lehetőség az árnyékolás. Ezt a box-shadow tulajdonsággal érhetjük el. Érdemes például az alábbi kódrészletet tanulmányozni:
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
Egyes nyomógombokat le is lehet tiltani, így azok nem lesznek kattinthatóak. Példa:
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
(Megjegyzés: ezeket a nem kattintható gombokat érdemes kicsit szürkíteni. Erre van az pl. opacity tulajdonság.)
Több gombot lehet közvetlenül egymás mellé tenni. A megfelelő kódrészlet:
.button {
float: left;
}
Kár, hogy így a gombok nagyon egybefolynak. Érdemes keretet adni minden gombre. Például a következőképpen:
.button {
float: left;
border: 1px solid green;
}
Időnként szükség lehet a függőleges elrendezésre is. Ilyenkor a float: left helyett a display: block tulajdonságot kell használni. Példa:
.button {
display: block;
}
A fejezet leghitelesebb forrása (további ötletekkel): https://www.w3schools.com/css/css3_buttons.asp