Boutons

?

Boutons

Boutons normaux et pour menu. 13 styles proposés.

Sélectionnez le style et la couleur souhaité.

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.

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.

?

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.

?

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
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
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.

?

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).

?

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.

?

Disabled Switch On-Off

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

?

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

Mon propre bouton

Créez votre bouton.

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