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.

Nyomógombok

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)

Kerek gombok

É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