S'inscrire

Boutons

Afficher un lien sous forme de bouton ou simplement un texte sous forme de bouton sans lien.

Boutons
NomOptionsExplications
color yellow, green, red, dark, gray, teal Couleur de fond du bouton. Par défaut : blue.
url Un lien http:// ou mailto etc...
self true,oui,ja Un lien interne
block oui,ja,true Un bouton qui prend toute la largeur de la page.
outline oui,ja,true Afficher un contour plutôt qu’une couleur de fond.
size small, large La taille du bouton. Par défaut : normal.
text Le texte qui sera affiché dans le bouton.
rounded oui,ja,true Bords arrondis.
narrow oui,ja,true Bouton étroit.
margin 1,2,3,4 Marge supplémentaire en haut et en bas du bouton.
animation fadeIn, rollIn... Voir liste des animations plus bas dans cet article.

 Marge

Sans marge

<button|text=SPIP>
<button|text=SPIP>
<button|text=SPIP>

SPIP
SPIP
SPIP

Avec marge

<button|text=SPIP|margin=1>
<button|text=SPIP|margin=1>
<button|text=SPIP|margin=1>

SPIP
SPIP
SPIP

<button|text=SPIP|margin=2>
<button|text=SPIP|margin=2>
<button|text=SPIP|margin=2>

SPIP
SPIP
SPIP

<button|text=SPIP|margin=3>
<button|text=SPIP|margin=3>
<button|text=SPIP|margin=3>

SPIP
SPIP
SPIP

<button|text=SPIP|margin=4>
<button|text=SPIP|margin=4>
<button|text=SPIP|margin=4>

SPIP
SPIP
SPIP

 Liens

<button|url=https://www.spip.net|text=SPIP>

CMS SPIP

<button|url=/article36|self=true|text=Lien interne>

Lien interne

 Bords arrondis

<button|rounded=true|text=Bouton arrondi>

Bouton arrondi

 Étroit

<button|narrow=true|text=Bouton étroit>

Bouton étroit

 Taille

<button|color=green|size=small|text=Un petit bouton>
<button|color=green|text=Bouton normal>
<button|color=green|size=large|text=Grand bouton>

Un petit bouton

Bouton normal

Grand bouton

 Bloc

<button|color=red|size=large|block=true|text=Un bouton mastoc>

Un bouton mastoc

 Couleurs

<button|color=green|text=Ce bouton est vert>
<button|color=yellow|text=Ce bouton est jaune>
<button|color=red|text=Ce bouton est rouge>
<button|color=dark|text=Ce bouton est sombre>
<button|color=gray|text=Ce bouton est gris>
<button|color=teal|text=Ce bouton est bleu canard>

Ce bouton est vert

Ce bouton est jaune

Ce bouton est rouge

Ce bouton est sombre

Ce bouton est gris

Ce bouton est bleu canard

 Contours

<button|color=green|outline=true|text=Mon titre à moi>

Mon titre à moi

<button|color=yellow|outline=true|text=Mon titre à moi>

Mon titre à moi

<button|color=red|outline=true|text=Mon titre à moi>

Mon titre à moi

<button|color=dark|outline=true|text=Mon titre à moi>

Mon titre à moi

<button|color=gray|outline=true|text=Mon titre à moi>

Mon titre à moi

<button|color=teal|outline=true|text=Mon titre à moi>

Mon titre à moi

 Animation

Les animations sont issues de la bibliothèque Animate.CSS de Daniel Eden.

Liste des animations Animate.CSS

Attention Seekers

  • bounce
<button|text=Effet bouton|animation=bounce>

Effet bouton


  • flash
<button|text=Effet bouton|animation=flash>

Effet bouton


  • pulse
<button|text=Effet bouton|animation=pulse>

Effet bouton


  • rubberBand
<button|text=Effet bouton|animation=rubberBand>

Effet bouton


  • shake
<button|text=Effet bouton|animation=shake>

Effet bouton


  • swing
<button|text=Effet bouton|animation=swing>

Effet bouton


  • tada
<button|text=Effet bouton|animation=tada>

Effet bouton


  • wobble
<button|text=Effet bouton|animation=wobble>

Effet bouton


  • jello
<button|text=Effet bouton|animation=jello>

Effet bouton

Bouncing Entrances

  • bounceIn
<button|text=Effet bouton|animation=bounceIn>

Effet bouton


  • bounceInDown
<button|text=Effet bouton|animation=bounceInDown>

Effet bouton


  • bounceInLeft
<button|text=Effet bouton|animation=bounceInLeft>

Effet bouton


  • bounceInRight
<button|text=Effet bouton|animation=bounceInRight>

Effet bouton


  • bounceInUp
<button|text=Effet bouton|animation=bounceInUp>

Effet bouton

Fading Entrances

  • fadeIn
<button|text=Effet bouton|animation=fadeIn>

Effet bouton


  • fadeInDown
<button|text=Effet bouton|animation=fadeInDown>

Effet bouton


  • fadeInDownBig
<button|text=Effet bouton|animation=fadeInDownBig>

Effet bouton


  • fadeInLeft
<button|text=Effet bouton|animation=fadeInLeft>

Effet bouton


  • fadeInLeftBig
<button|text=Effet bouton|animation=fadeInLeftBig>

Effet bouton


  • fadeInRight
<button|text=Effet bouton|animation=fadeInRight>

Effet bouton


  • fadeInRightBig
<button|text=Effet bouton|animation=fadeInRightBig>

Effet bouton


  • fadeInUp
<button|text=Effet bouton|animation=fadeInUp>

Effet bouton


  • fadeInUpBig
<button|text=Effet bouton|animation=fadeInUpBig>

Effet bouton

Flippers

  • flip
<button|text=Effet bouton|animation=flip>

Effet bouton


  • flipInX
<button|text=Effet bouton|animation=flipInX>

Effet bouton


  • flipInY
<button|text=Effet bouton|animation=flipInY>

Effet bouton

Lightspeed


  • lightSpeedIn
<button|text=Effet bouton|animation=lightSpeedIn>

Effet bouton

Rotating Entrances

  • rotateIn
<button|text=Effet bouton|animation=rotateIn>

Effet bouton


  • rotateInDownLeft
<button|text=Effet bouton|animation=rotateInDownLeft>

Effet bouton


  • rotateInDownRight
<button|text=Effet bouton|animation=rotateInDownRight>

Effet bouton


  • rotateInUpLeft
<button|text=Effet bouton|animation=rotateInUpLeft>

Effet bouton


  • rotateInUpRight
<button|text=Effet bouton|animation=rotateInUpRight>

Effet bouton

Sliding Entrances

  • slideInUp
<button|text=Effet bouton|animation=slideInUp>

Effet bouton


  • slideInDown
<button|text=Effet bouton|animation=slideInDown>

Effet bouton


  • slideInLeft
<button|text=Effet bouton|animation=slideInLeft>

Effet bouton


  • slideInRight
<button|text=Effet bouton|animation=slideInRight>

Effet bouton

Zoom Entrances

  • zoomIn
<button|text=Effet bouton|animation=zoomIn>

Effet bouton


  • zoomInDown
<button|text=Effet bouton|animation=zoomInDown>

Effet bouton


  • zoomInLeft
<button|text=Effet bouton|animation=zoomInLeft>

Effet bouton


  • zoomInRight
<button|text=Effet bouton|animation=zoomInRight>

Effet bouton


zoomInUp

<button|text=Effet bouton|animation=zoomInUp>

Effet bouton

Specials

  • jackInTheBox
<button|text=Effet bouton|animation=jackInTheBox>

Effet bouton


  • rollIn
<button|text=Effet bouton|animation=rollIn>

Effet bouton

Lettre d’information

Recevez directement dans votre boîte de réception mes dernières publications

En indiquant votre adresse email ci-dessus, vous consentez à recevoir notre Newsletter par voie électronique et acceptez notre Politique de confidentialité. Vous pouvez vous désinscrire à tout moment. .