BUTTONS

Button maken van een woord / meerdere woorden

(standaard tekst) Voorbeeld

(tekst met UItkit) <button type="button" class="uk-button">Voorbeeld</button>

(tekst met UIkit)  <button type="button" class="uk-button">Meerdere voorbeelden etc</button>

Noot: De gekozen / gemaakte vormgeving (template) bepaalt in beginsel ook de vormgeving van de button!
Noot: De UIkit code is paars gearceerd, geel is de standaard tekst.
Noot: Alles wat hieronder staat inzake de vormgeving van de button (grootte, kleur, e.d.) is ook hiervoor te gebruiken. 

 

Button maken van een link

Vaak is een link voldoende om naar een andere pagina, website o.i.d. te gaan. Echter in sommige website is het mooier om een link grafisch weer te geven. Dit kan je doen door een afbeelding hiervoor te maken en de afbeelding te voorzien van de link, maar dit kan ook eenvoudiger met behulp van UIkit.
Noot: De gekozen / gemaakte vormgeving (template) bepaalt in beginsel ook de vormgeving van de button!

 

Standaard HTML link
(standaard) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML)     Door op deze <a href="http://www.ret.nl" target="_blank">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

 

Door UIkit grafisch vormgegeven link
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

 

De button is in grootte in 4 smaken (mini, small, default en large) aan te passen, hieronder de voorbeelden met de UIkit code paars gearceerd.

Mini
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button uk-button-mini">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

Small
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button uk-button-small">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

Default
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

Large
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button uk-button-large">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

 

De button is in diverse kleuren (primary, succes, danger) aan te passen, hieronder de voorbeelden met de UIkit code paars gearceerd. In dit voorbeeld zijn tevens de groote en de kleur van de button gecomineerd, hoeft niet, kan wel!
Noot: De kleuren van primary, succes en danger zijn afhankelijk van de vormgeving/template en de CSS die hiervoor gebruikt is!

Primary
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button uk-button-mini uk-button-primary">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

Succes
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button uk-button-small uk-button-success">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

Default
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

Danger
(standaard UIkit) Door op deze link te klikken opent er een nieuw browservenster met de website van de RET.
(in HTML met UIkit) Door op deze <a href="http://www.ret.nl" target="_blank" type="button" class="uk-button uk-button-large uk-button-danger">link</a> te klikken opent er een nieuw browservenster met de website van de RET.

 

Button(s) over een deel of de gehele breedte van een website

Het is mogelijk om een button over de gehele breedte van je website weer te laten geven.

Testbutton

<button class="uk-button uk-width-1-1">Testbutton</button>


<button class="uk-button uk-width-1-1 uk-button-primary">Testbutton</button>

 

Het is mogelijk om een button over de halve breedte van je website weer te laten geven.

Testbutton

<button class="uk-button uk-width-1-2">Testbutton</button>



<button class="uk-button uk-width-1-2 uk-button-primary">Testbutton</button>

 

Het is mogelijk om een button over een derde deel van je website weer te laten geven.

Testbutton


<button class="uk-button uk-width-1-3">Testbutton</button>



<button class="uk-button uk-width-1-3 uk-button-primary">Testbutton</button>

 

Dan is het dus ook mogelijk om 2 buttons van elk een derde deel naast elkaar over 2/3 van je website weer te laten geven.

Testbutton Testbutton


<button class="uk-button uk-width-1-3">Testbutton</button><button class="uk-button uk-width-1-3 uk-button-primary"> Testbutton</button>


Een horizontale of vertikale groepering van buttons

Linkbutton 1 Button 2 Button 3

Linkbutton 1

 

<div class="uk-button-group"><a href="http://www.ifred.nl" class="uk-button uk-button-primary">Linkbutton 1</a>
    <button class="uk-button uk-button-success">Button 2</button>
    <button class="uk-button uk-button-danger">Button 3</button>
</div>


Linkbutton 1
Button 2
Button 3

Linkbutton 1

 

<div class="uk-button-group"><a href="http://www.ifred.nl" class="uk-button uk-button-primary">Linkbutton 1</a><br />
    <button class="uk-button uk-button-success">Button 2</button><br />
    <button class="uk-button uk-button-danger">Button 3</button>
</div> 

 

Buttons met een dropdownmenu (Hoover & Klik)

 

<!-- Dit is de javascript declaratie -->
<div class="uk-button-dropdown" data-uk-dropdown="">

    <!-- Button voor dropdown -->
    <button class="uk-button uk-button-danger">Button met Dropdown(menu)&nbsp; <em class="uk-icon-caret-down"></em></button>
       <!-- Dropdown -->
       <div class="uk-dropdown uk-dropdown-small">
           <ul class="uk-nav uk-nav-dropdown uk-button-success">
               <li><a href="http://www.ifred.nl">iFred 1</a></li>
               <li><a href="http://www.ifred.nl">iFred 2</a></li>
               <li>Hoi</li>

          </ul>

       </div>
</div> 

 

<div class="uk-margin" data-uk-margin="">
    <div class="uk-button-group">
        <button class="uk-button">Button</button>
        <div data-uk-dropdown="{mode:'click'}">
            <button class="uk-button"><em class="uk-icon-caret-down"></em></button>
            <div class="uk-dropdown uk-dropdown-small">
                <ul class="uk-nav uk-nav-dropdown">
                    <li><a href="#">AA</a></li>
                    <li><a href="#">BBB</a></li>
                    <li class="uk-nav-header">Koptekst1</li>
                    <li><a href="#">CCCC</a></li>
                    <li><a href="#">DDDDD</a></li>
                    <li class="uk-nav-header">Koptekst2</li>
                    <li><a href="#">EEEEEEE</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-primary">Button</button>
        <div data-uk-dropdown="{mode:'click'}">
            <button class="uk-button uk-button-primary"><em class="uk-icon-caret-down"></em></button>
            <div class="uk-dropdown uk-dropdown-small">
                <ul class="uk-nav uk-nav-dropdown">
                     <li><a href="#">11</a></li>
                    <li><a href="#">222</a></li>
                    <li class="uk-nav-header">Koptekst-A</li>
                    <li><a href="#">3333</a></li>
                    <li><a href="#">44444</a></li>
                    <li class="uk-nav-header">Koptekst-B</li>
                    <li><a href="#">555555</a></li>

                </ul>
            </div>
        </div>
    </div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-success">Button</button>
        <div data-uk-dropdown="{mode:'click'}">
            <button class="uk-button uk-button-success"><em class="uk-icon-caret-down"></em></button>
            <div class="uk-dropdown uk-dropdown-small">
                <ul class="uk-nav uk-nav-dropdown">
                     <li><a href="#">QQ</a></li>
                    <li><a href="#">WWW</a></li>
                    <li class="uk-nav-header">Qwert1</li>
                    <li><a href="#">EEEE</a></li>
                    <li><a href="#">RRRRR</a></li>
                    <li class="uk-nav-header">Qwert2</li>
                    <li><a href="#">TTTTTT</a></li>

                </ul>
            </div>
        </div>
    </div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-danger">Button</button>
        <div data-uk-dropdown="{mode:'click'}">
            <button class="uk-button uk-button-danger"><em class="uk-icon-caret-down"></em></button>
            <div class="uk-dropdown uk-dropdown-small">
                <ul class="uk-nav uk-nav-dropdown">
                      <li><a href="#">55</a></li>
                    <li><a href="#">666</a></li>
                    <li class="uk-nav-header">Nummer1</li>
                    <li><a href="#">7777</a></li>
                    <li><a href="#">88888</a></li>
                    <li class="uk-nav-header">Nummer2</li>
                    <li><a href="#">999999</a></li>

                </ul>
            </div>
        </div>
    </div>
</div>