Painikkeet

Painikkeilla ohjataan katsojaa tai kävijää toimenpidettä kohti.

Painikkeiden käyttö käyttöliittymissä

Painikkeissa ei tule olla pyöristettyjä kulmia. Tekstin tulee asettua painikkeen keskelle siten, että ympärillä on riittävästi tilaa. Painikkeen reunan paksuus on 2 px.

Käyttöliittymissä painikkeiden värien tulee määrittyä alla olevien prioriteettien perusteella:

Primary CTA -painiketta käytetään verkkokaupassa ohjaamaan käyttäjää läpi ostoprosessin. Primary-painike ohjaa käyttäjää aina kyseisellä sivulla tärkeimpänä pidettyyn kohteeseen.
Secondary CTA on käytössä silloin kun asian esittäminen ei ole yhtä tärkeää kuin primary CTA. Nappien käytössä on huomioitava se, että ne erottuvat selkeästi muusta sisällöstä ja nimenomaan ohjaavat sivuston käyttäjää tekemään haluttuja toimenpiteitä loogisesti.
Tertiary CTA -painiketta käytetään silloin, kun sivuston elementti on vähiten tärkeä mutta sille halutaan kuitenkin taata näkyvyys niin, että sivuston käyttäjä ei sitä ohita lukematta.

Painikkeen tyylit

.button, button {
    &:focus {
        outline: 1px solid currentColor;
    }
    border: 2px solid currentColor;
    border-radius: 0;
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 700;
    &.primary {
        background-color: $primary;
        color: $white;
        border-color: $primary;
    }
    &.secondary {
        background-color: transparent;
        color: $black;
        border-color: $black;
    }
    &.tertiary {
        background-color: $tertiary;
        color: $white;
        border-color: $tertiary;
    }
}

Painikkeiden käyttö muissa materiaaleissa

Painikkeen näköisiä visuaalisia elementtejä voi käyttää myös muissa materiaaleissa, kuten mainosbannereissa. Myös näissä yhteyksissä painikkeissa ei tule olla pyöristettyjä kulmia. Painikkeet voivat olla minkä vaan Fonecta-brändin päävärien värisiä. Värivalinnassa tulee huomioida kuitenkin se, että siinä on riittävä kontrasti, jotta se erottuu taustasta.