Boutons

?

Boutons#

Boutons normaux et pour menu. 13 styles proposés. Sélectionnez le style et la couleur souhaité.

<a class="AKL-btnModern-ocean">Bouton</a>
water
fire
leaf
wind
dark
magic
ocean
amber
hell
gold
silver
fairy
wood
grass
spectrum
snow
?

Bouton avancé#

Bouton avancé. 2 styles proposés. Consigne d'utilisation : - Dans backgroundcolor, placer la couleur du fond sur lequel se trouve le bouton.

<a class="AKL-btnAdvanced-amber" background-color="hsl(252, 10%, 26%)"> <label class="AKL-label-btnAdvanced">Bouton</label> </a> <a class="AKL-btnAdvanced2-amber" background-color="hsl(252, 10%, 26%)"> <label class="AKL-label-btnAdvanced">Bouton</label> </a>
water
fire
leaf
wind
dark
magic
ocean
amber
hell
gold
silver
fairy
wood
grass
spectrum
snow
?

Bouton "copier"#

Bouton servant à copier un texte. Consignes d'utilisation : - Dans le for, placer l'id de la zone de texte à copier. - La zone de texte doit être un <textarea> ou un <input> Conseil d'utilisation : - Possibilité de rajouter une class d'un bouton AKL.

<label class="AKL-btnCopy" for="texteACopier">Copier</label>
?

Bouton "fichier"#

Bouton servant sélectionner un fichier pour un formulaire. Conseil d'utilisation : - Possibilité de rajouter une class d'un bouton AKL au label.

<label for="file1" class="AKL-btnClassic-Border-amber">Sélectionner</label> <input hidden type="file" id="file1" class="AKL-btnFile">
?

Menu déroulant#

Menu déroulant pour proposer plusieurs choix, se déroule au survol de la souris. 2 styles proposés. Conseils d'utilisation : - Cette version est adapté pour mettre des liens (vers d'autres pages, etc.). - L'icon à côté du nom du menu peut être changé ou retiré en modifiant l'attribut icon.

Page
Page
Un
Deux
Trois
<div class="AKL-btnDropdown-blc-ocean"> <span class="AKL-btnDropdown-span" icon="⯆">Page</span> <div class="AKL-btnDropdown-list"> <a class="AKL-btnDropdown-list-btn">Une</a> <a class="AKL-btnDropdown-list-btn">Deux</a> <a class="AKL-btnDropdown-list-btn">Trois</a> </div> </div> <div class="AKL-btnDropdown-Flat-blc-ocean"> <span class="AKL-btnDropdown-span" icon="⯆">Page</span> <div class="AKL-btnDropdown-list"> <a class="AKL-btnDropdown-list-btn">Une</a> <a class="AKL-btnDropdown-list-btn">Deux</a> <a class="AKL-btnDropdown-list-btn">Trois</a> </div> </div>
water
fire
leaf
wind
dark
magic
ocean
amber
hell
gold
silver
fairy
wood
grass
spectrum
snow
?

Menu déroulant sélecteur#

Menu déroulant sélecteur pour proposer plusieurs choix, se déroule au clic. 2 styles proposés. Consignes d'utilisation : - L'attribut type indique le type de valeur qui sera retourné dans l'attribut value, il en éxiste pour le moment 3 : -- val (valeur), retourne le texte du choix sélectionné. -- num (numéro), retourne le numéro de la position du choix sélectionné (commence à partir de 0). -- bin (binaire), retourne le numéro de la position en binaire du choix sélectionné. Conseils d'utilisation : - Cette version est adapté pour être utilisé dans des formulaires. - L'îcon à côté du nom du menu NE PEUT PAS être changé/retiré.

Choix
Un
Deux
Trois
Choix
Un
Deux
Trois
<div class="AKL-btnDropdownSelect-blc-amber" type="val" value="" for="id1"> <span id="id1" class="AKL-btnDropdownSelect-span" icon="⯆">Choix</span> <div class="AKL-btnDropdownSelect-list"> <div class="AKL-btnDropdownSelect-list-btn" for="id1">Un</div> <div class="AKL-btnDropdownSelect-list-btn" for="id1">Deux</div> <div class="AKL-btnDropdownSelect-list-btn" for="id1">Trois</div> </div> </div> <div class="AKL-btnDropdownSelect-Flat-blc-amber" type="val" value="" for="id1"> <span id="id1" class="AKL-btnDropdownSelect-span" icon="⯆">Choix</span> <div class="AKL-btnDropdownSelect-list"> <div class="AKL-btnDropdownSelect-list-btn" for="id1">Un</div> <div class="AKL-btnDropdownSelect-list-btn" for="id1">Deux</div> <div class="AKL-btnDropdownSelect-list-btn" for="id1">Trois</div> </div> </div>
water
fire
leaf
wind
dark
magic
ocean
amber
hell
gold
silver
fairy
wood
grass
spectrum
snow
?

Checkboxs#

Cases à cocher utilent pour les formulaires servant. 4 styles proposés. Conseils d'utilisation : - Le for correspond à l'id de l'input (1 seul for/id par checkbox). - Rajouter "checked" avant de fermer l'input pour que la checkbox soit validée par défaut.

<label for="chekbox1" class="AKL-checkbox--RG"></label> <input id="chekbox1" type="checkbox" hidden> <label for="chekbox2" class="AKL-checkbox--check"></label> <input id="chekbox2" type="checkbox" hidden> <label for="chekbox3" class="AKL-checkbox--cross"></label> <input id="chekbox3" type="checkbox" hidden> <label for="chekbox4" class="AKL-checkbox--circle"></label> <input id="chekbox4" type="checkbox" hidden>
?

Radio boutons#

Cases à cocher pour les formulaire à choix multiples. 4 styles proposés. Les styles disponibles sont les mêmes que pour les checkboxs. Consigne d'utilisation : - Le name doit être identique pour chaque radio bouton faisait parti du même groupe. Conseils d'utilisation : - Le for correspond à l'id de l'input (1 seul for/id par checkbox). - Rajouter "checked" avant de fermer l'input pour que le radio bouton soit validée par défaut (ne pas en mettre plus d'un par groupe).

<label for="radio1" class="AKL-radio--circle"></label> <input name="a" id="radio1" type="radio" hidden>
?

Switch On-Off#

Bouton à 2 positions. 4 styles proposés. Conseils d'utilisation : - Dans la class, remplacer 'on' par 'off' pour que le bouton soit éteint par défaut. - Les évènement doivent être géré en javascript.

<div class="AKL-onOff1--on"></div> <div class="AKL-onOff2--on"></div> <div class="AKL-onOff3--on"></div> <div class="AKL-onOff4--on"></div>
?

Disabled Switch On-Off#

Bouton à 2 positions désactivé. 2 styles proposés.

<div class="AKL-onOff1-locked"></div> <div class="AKL-onOff2-locked"></div>
?

Range slider#

Range slider au nombre de position paramétrable. Conseils d'utilisation : - min : valeur minimum sélectionnable - max : valeur maximum sélectionnable - value : valeur actuelle du curseur - step : écart entre deux valeur Lien vers un site permettant de réaliser son propre slider

<input type="range" class="AKL-range" min="0" max="100" value="50" step="1">

Mon propre bouton#

Créez votre bouton. <label class="myClass">Mon propre bouton</label>

Normal
Hover
  • Size
  • Font
  • Border
  • Background
  • Box shadow

Nom

Class

Padding gauche-droite

Padding haut-bas

Couleur : H

S

L

A

Taille

Radius

Couleur : H

S

L

A

Couleur : H

S

L

A

Décallage gauche-droite

Décallage haut-bas

Flou

Taille

Couleur : H

S

L

A

  • Size
  • Font
  • Border
  • Background
  • Box shadow

Activer l'effet hover (au survol)

Reprendre les paramètres normaux

Padding gauche-droite

Padding haut-bas


Couleur : H

S

L

A

Taille

Radius

Couleur : H

S

L

A

Couleur : H

S

L

A

Décallage gauche-droite

Décallage haut-bas

Flou

Taille

Couleur : H

S

L

A