Webspire

Administrační systém

Kreativní řešení: Atypická tlačítka

Štítky:

Kódování není jen neustálé opakování deklarací těch samých vlastností, ale také přináší nové a neprobádané výzvy, nad kterými si láme hlavu nejen náš senior kodér. Projekt Lemur obsahuje vytvoření dvou samostatných webů, které jsou velmi specifické a dochází k rozsáhlému vývoji na míru. S ohledem na cílovou skupinu je zvolen design zaměřený na děti a jejich rodiče, který obsahuje velmi zajímavě řešené komponenty. Jedním z dominantních prvků na stránkách jsou atypická tlačítka. Stylem pokus-omyl jsme se snažili nastylovat tato tlačítka dle grafického návrhu, který korespondoval s grafickou identitou zadavatelské společnosti. Mezi prvními nápady bylo vložit tlačítko jako obrázek na pozadí nebo jako svg. Nicméně při tomto řešení se vždy vysktl nechtěný a nepříjemný side-effect. Nemůžeme totiž redukovat šířku tlačítka, a to se tedy jednoduše nepřizpůsobí šířce textu. Museli jsme pátrat dál. Vyřešit se dá takové tlačítko pomocí pokročilých CSS vlastností - výpočtu hodnoty border-radius v procentech z šířky/výšky elementu a pozadí. Pak už ale tlačítko patřičně neostínujete. To jsme vyřešili zduplikováním a zmonochromatizováním stylů celého tlačítka pro sousední element. Ten se absolutně napozicuje vůči tlačítku tak, aby vytvořil požadovaný stín.

Snímek obrazovky 2017-01-02 v 16.32.10
Snímek obrazovky 2017-01-02 v 16.32.10

Základní HTML struktura vypadá takto:

Button vytvoříme pomocí tagu <div> a uvnitř vloženého odkazu. Nesmíme zapomenout element, který nastylujeme jako stín pod buttonem - v našem případě se jedná o tag <span>. V tomto případě nemůžeme použít klasický box-shadow, protože tato vlastnost na to nestačí.

<body>
    <div class="wrapper">
        <div class="button">
            <div class="button__front">
                <a href="#" class="button__link">TLAČÍTKO</a>
            </div>
            <span class="button__shadow"></span>
        </div>
    </div>
</body>

CSS stylopis je následující:

Jednoduše napozicujeme tlačítko.

.wrapper {
    margin: 0 auto;
    position: relative;
    width: 600px;
}

Následně si ostylujeme tlačítko. Z-index nastavíme na 1, tato hodnota je důležitá vzhledem k pořadí dalších vrstev. Zajistí nám, aby tlačítko fungovalo a bylo klikací.

.button {
    cursor: pointer;
    display: block;
    margin-left: .4em;
    position: absolute;
    right: .5em;
    text-align: center;
    z-index: 1;
}

Nyní se zaměříme na stylování “první vrstvy” tlačítka. Oválných rohů docílíme deklarací border-radius: 50% / 11%. Právě procenta se používají pro oválné tvary. Zakulacení se provede tak, že postihne uvedená procenta z šířky / výšky prvku. Tímto zápisem zakulacujeme okraje především na šířce elementu.

.button__front {
    background-color: lightblue;
    border-radius: 50% / 11%;
    color: black;
    display: block;
    font-size: 137.5%;
    line-height: 100%;
    padding: 0.6em 0.7em;
    position: relative;
    width: 100%;
}

Na pseudoelementu :before podědíme vlastnosti background (barva atd.), a dále dotvoříme zakulacené okraje, ale tentokrát se zaměříme na výšku prvku.

.button__front:before {
    background: inherit;
    border-radius: 4% / 50%;
    bottom: 10%;
    content: "";
    display: block;
    left: -4%;
    position: absolute;
    right: -4%;
    top: 10%;
    z-index: -1;
}

Nastylujeme odkaz tlačítka.

.button__link {
    color: black;
    text-decoration: none;
}

Postup opakujeme také na elementu, který má zastupovat stín. Zde je vhodné si vytvořit na stylování mixin, či podědit styly z prvku .button__front.

.button__shadow {
    background-color: black;
    border-radius: 50% / 11%;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: .2em;
    width: 122%;
    z-index: -2;
}

Podobně také nastylujeme pseudoelement :before na "stínu" tlačítka.

.button__shadow:before {
    background: inherit;
    border-radius: 4% / 50%;
    bottom: 10%;
    content: "";
    display: block;
    left: -4%;
    position: absolute;
    right: -4%;
    top: 10%;
    z-index: -1;
}

Popsané řešení jsme aplikovali v rámci našich projektů Lemur dětem a Lemur centrum.
Ukázku tlačítka si můžete prohlédnout na Codepenu.


Užitečné odkazy a zdroje:
Jak vytvořit různé tvary v CSS (anglicky).

Pokročilé způsoby použití border-radius (anglicky).

Sdílet:
###message