CSS Gumbi

Gumbi so namenjeni za sprožitev dejanj in se ga največ uporablja v povezavi z JavaScript-om. Zato se bomo v CSS vadnici naučili vse, kako gumbe lahko obarvamo, tako ozadje kot besedilo. Primeri kažejo, kako se določi barve gumbov, obrobe okrog gumbov itn. Velikost gumba se prilagodi pisavi, in nam ni potrebno nastavljati velikosti, samo v takem primeru bodo velikosti različne. Gumbi na spletni strani nam lahko pomagajo v marsikateri izboljšavi spletne strani.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Barve gumbov</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        /* OSNOVNI STIL ZA VSE GUMBE */
        button {
            padding: 12px 24px;
            margin: 12px;
            min-width: 160px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-family: "Roboto", sans-serif;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        button:active {
            transform: translateY(1px);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        /* OZADJA ZA GUMBE */
        .brown { background-color: brown; }
        .red { background-color: red; }
        .yellow { background-color: yellow; }
        .blue { background-color: blue; }
        .green { background-color: green; }
        .black { background-color: black; }
        
        /* NAMENSKI GUMBI */
        .primarni {
            background-color: #4CAF50;
            color: white;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .primarni:hover {
            background-color: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .sekundarni {
            background-color: white;
            color: #4CAF50;
            border: 2px solid #4CAF50;
        }
        .sekundarni:hover {
            background-color: #4CAF50;
            color: black;
        }
        
        .opozorilni {
            background-color: #ff9800;
            color: white;
            border: none;
            font-weight: bold;
        }
        .opozorilni:hover {
            background-color: #f57c00;
        }
        
        /* VELIKOSTI GUMBOV */
        .small {
            padding: 8px 16px;
            font-size: 14px;
        }
        
        .medium {
            padding: 12px 24px;
            font-size: 16px;
        }
        
        .large {
            padding: 16px 32px;
            font-size: 18px;
        }
        
        /* SENCE */
        .mehka-senca {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .mehka-senca:hover {
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
        }
        
        .vecplastna-senca {
            box-shadow: 
                0 2px 4px rgba(0, 0, 0, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.1),
                0 8px 16px rgba(0, 0, 0, 0.1);
        }
        .vecplastna-senca:hover {
            box-shadow: 
                0 4px 8px rgba(0, 0, 0, 0.2),
                0 8px 16px rgba(0, 0, 0, 0.2),
                0 16px 32px rgba(0, 0, 0, 0.2);
            transform: translateY(-4px);
        }
        
        .notranja-senca {
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
            background-color: #f0f0f0;
        }
        .notranja-senca:hover {
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
        }
        
        /* OBLIKE */
        .krog {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            padding: 0;
            background-color: #9C27B0;
            color: white;
        }
        
        .pill {
            border-radius: 50px;
            background-color: #009688;
            color: white;
            padding: 12px 36px;
        }
        
        .asimetricni {
            border-radius: 20px 5px;
            background-color: #F44336;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Barve gumbov</h1>
    
    <button class="brown">RJAVI GUMB</button>
    <button class="red">RDEČI GUMB</button>
    <button class="yellow">RUMENI GUMB</button>
    <button class="blue">MODRI GUMB</button>
    <button class="green">ZELENI GUMB</button>
    <button class="black">ČRNI GUMB</button>
    <hr>
    <button class="primarni">Primarni gumb</button>
    <button class="sekundarni">Sekundarni gumb</button>
    <button class="opozorilni">Opozorilni gumb</button>
    <hr>
    <button class="mehka-senca">Mehka senca</button>
    <button class="vecplastna-senca">Večplastna senca</button>
    <button class="notranja-senca">Notranja senca</button>
    <hr>
    <button class="small">Majhen gumb</button>
    <button class="medium">Srednji gumb</button>
    <button class="large">Velik gumb</button>
    <hr>
    <button class="krog">Krog</button>
    <button class="pill">Tabletka</button>
    <button class="asimetricni">Asimetrični</button>
</body>
</html>

REZULTAT

Lastnost	Primer	Opis
Osnovno oblikovanje
`background-color`	`background-color: #4CAF50;`	Določi barvo ozadja gumba
`color`	`color: white;`	Določi barvo besedila gumba
`padding`	`padding: 12px 24px;`	Določi notranji odmik (velikost gumba)
`border`	`border: none;`	Odstrani ali nastavi obrobo gumba
`border-radius`	`border-radius: 8px;`	Zaobljeni vogali gumba
`cursor`	`cursor: pointer;`	Pokaže roko ob prehodu miške (klikljivo)
`font-size`	`font-size: 16px;`	Določi velikost pisave gumba
`font-weight`	`font-weight: 600;`	Določi debelino pisave
Namenski gumbi
`.primarni`	`background-color: #4CAF50; color: white;`	Primarno dejanje (npr. "Pošlji", "Shrani")
`.sekundarni`	`background-color: white; border: 2px solid #4CAF50;`	Sekundarno dejanje (obrisan gumb)
`.opozorilni`	`background-color: #ff9800; color: white;`	Opozorilno dejanje (npr. "Izbriši", "Pozor")
`.nevtralni`	`background-color: #f5f5f5; color: black;`	Nevtralno dejanje (npr. "Prekliči")
Velikosti
`.small`	`padding: 8px 16px; font-size: 14px;`	Majhen gumb
`.medium`	`padding: 12px 24px; font-size: 16px;`	Srednji gumb (privzeto)
`.large`	`padding: 16px 32px; font-size: 18px;`	Velik gumb
Sence
`box-shadow`	`box-shadow: 0 4px 6px rgba(0,0,0,0.1);`	Mehka senca pod gumbom
`box-shadow (multi)`	`box-shadow: 0 2px 4px ..., 0 4px 8px ...;`	Večplastna senca za globino
`box-shadow: inset`	`box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);`	Notranja senca (vtisnjen učinek)
Oblike
`.krog`	`width: 100px; height: 100px; border-radius: 50%;`	Popolnoma okrogel gumb
`.pill`	`border-radius: 50px;`	Tabletka oblika (zelo zaobljeni robovi)
`.asimetricni`	`border-radius: 20px 5px;`	Asimetrično zaobljeni vogali
Stanja in efekti
`:hover`	`background-color: #45a049; transform: translateY(-2px);`	Sprememba ob prehodu miške
`:active`	`transform: translateY(1px);`	Sprememba ob kliku (pritisnjen učinek)
`:disabled`	`opacity: 0.6; cursor: not-allowed;`	Onemogočen gumb (ni klikljiv)
`transition`	`transition: all 0.3s ease;`	Tečen prehod med stanji

CSS Gumbi

Vadnica.org

Povezave

Podpora