Modèle:Button

📚 Modèle:Button

Utilisation

Ce modèle crée un bouton cliquable stylisé avec icône/logo pointant vers n'importe quelle destination (réseaux sociaux, services externes, pages internes, plateformes de téléchargement, etc.).

Syntaxe

{{Button
|link        = URL du lien
|style       = Style prédéfini (logo, couleur ou surface)
|image       = Nom du fichier image personnalisé (optionnel)
|text        = Texte affiché (optionnel)
|align       = Alignement du bouton : left, right, center
|background  = Couleur d'arrière-plan personnalisée (optionnel)
|size        = Taille de l'image (défaut : x40px)
|height      = Hauteur du bouton (ex : 30px, 56px) (optionnel)
|title       = Texte du titre au survol (défaut : valeur de text)
|alt         = Texte alternatif (défaut : valeur de text)
}}

Paramètres

Paramètre	Description	Requis	Défaut
link	URL complète ou relative	Oui	-
style	Style prédéfini : nom de logo (ex : `discord`), surface (`surface-1` à `surface-4`), ou couleur générique (`danger`, `success`, etc.)	Non	(bleu progressif par défaut)
image	Nom du fichier image personnalisé (ex : "MonLogo.svg"). Si style est utilisé, le logo correspondant est automatiquement chargé.	Non	-
text	Texte affiché sur le bouton	Non	(vide)
align	Alignement du bouton sur la page : `left`, `center`, `right`	Non	(pleine largeur)
background	Couleur d'arrière-plan personnalisée (hex, rgb, nom CSS). Remplace le style prédéfini.	Non	(utilise style ou défaut)
size	Taille de l'image (format MediaWiki)	Non	x40px
height	Hauteur du bouton (ex : `30px`, `56px`). Utile pour les boutons sans logo.	Non	80px
title	Texte du titre HTML (infobulle au survol)	Non	valeur de text
alt	Texte alternatif pour l'accessibilité	Non	valeur de text

Message non défini

Styles prédéfinis

Couleur par défaut

Style	Description	Exemple
	Couleur par défaut	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr [[Fichier:ButtonLink-gray.svg	x40px	link=	alt=Couleur par défaut ]] Couleur par défaut ]

Surfaces adaptatives (s'adaptent au thème clair/sombre)

Style	Description	Exemple
`surface-0`	Surface de niveau 0 (la plus claire en mode clair, la plus foncée en mode sombre)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr [[Fichier:ButtonLink-gray.svg	x40px	link=	alt=Surface 0 ]] Surface 0 ]
`surface-1`	Surface de niveau 1	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr [[Fichier:ButtonLink-gray.svg	x40px	link=	alt=Surface 1 ]] Surface 1 ]
`surface-2`	Surface de niveau 2	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr [[Fichier:ButtonLink-gray.svg	x40px	link=	alt=Surface 2 ]] Surface 2 ]
`surface-3`	Surface de niveau 3	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr [[Fichier:ButtonLink-gray.svg	x40px	link=	alt=Surface 3 ]] Surface 3 ]
`surface-4`	Surface de niveau 4 (la plus foncée en mode clair, la plus claire en mode sombre)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr [[Fichier:ButtonLink-gray.svg	x40px	link=	alt=Surface 4 ]] Surface 4 ]

Les surfaces utilisent les variables CSS du thème Citizen (--color-surface-X) et s'adaptent automatiquement au mode clair/sombre.

Couleurs prédéfinies

Réseaux sociaux

Code	Plateforme	Couleur	Exemple
`discord`	Discord	violet (#5865f2)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`twitter`	Twitter/X	Bleu (#1da1f2)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`youtube`	YouTube	Rouge (#ff0000)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`twitch`	Twitch	Violet (#9146ff)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`reddit`	Reddit	Orange (#ff4500)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`mastodon`	Mastodon	Violet (#6364ff)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`bluesky`	Bluesky	Bleu (#0085ff)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`linkedin`	LinkedIn	Bleu (#0077b5)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`facebook`	Facebook	Bleu (#1877f2)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`instagram`	Instagram	Dégradé	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`tiktok`	TikTok	Noir (#000000)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`snapchat`	Snapchat	Jaune (#fffc00)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`threads`	Threads	Noir (#000000)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]

Développement & Tech

Code	Plateforme	Couleur	Exemple
`stackoverflow`	Stack Overflow	Noir (#252627)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`npm`	npm	Rouge (#cb3837)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`pypi`	PyPI	Bleu (#3775a9)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`docker`	Docker	Bleu (#2496ed)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`kubernetes`	Kubernetes	Bleu (#326ce5)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`codepen`	CodePen	Blanc (#ffffff)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`gitlab`	GitLab	Orange (#fc6f23)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`github`	GitHub	Sombre (#24292e)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]

Plateformes de financement

Code	Plateforme	Couleur	Exemple
`buymeacoffee`	Buy Me a Coffee	Jaune (#ffdd00)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`helloasso`	HelloAsso	Violet (#4C40CF)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`kofi`	Ko-fi	Rouge (#ff5e5b)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`liberapay`	Liberapay	Jaune (#f6c915)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`opencollective`	Open Collective	Bleu (#7fadf2)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`patreon`	Patreon	Rouge (#ff424d)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`stripe`	Stripe	Violet (#635BFF)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]

Plateformes de plugins Minecraft

Code	Plateforme	Couleur	Exemple
`modrinth`	Modrinth	Vert (#1bd96a)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`curseforge`	CurseForge	Orange (#f16436)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`hangar`	Hangar	Bleu (#0d6efd)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`spigotmc` / `spigot`	SpigotMC	Jaune (#f7c03e)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`bukkit`	Bukkit	Orange (#f89a1e)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`paper` / `paper`	PaperMC	Bleu (#1a8cff)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`purpur`	Purpur	Violet (#a855f7)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`polymart`	Polymart	Rose (#ec4899)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`github-releases`	GitHub Releases	Vert (#238636)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`jenkins`	Jenkins	Rouge (#d24939)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`maven`	Maven	Rouge (#c71a36)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]

Mod loaders Minecraft

Code	Plateforme	Couleur	Exemple
`minecraft`	Minecraft	Vert (#62b47a)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`forge`	Forge	Bleu foncé (#1e2c42)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`fabric`	Fabric	Beige (#dbd3c8)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`quilt`	Quilt	Violet (#8b5cf6)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`neoforge`	NeoForge	Orange (#ff6b35)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]

Logiciels serveur

Code	Plateforme	Couleur	Exemple
`velocity`	Velocity	Bleu (#3fa9f5)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`waterfall`	Waterfall	Bleu (#0088ff)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`bungeecord`	BungeeCord	Jaune (#ffcc00)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`sponge`	Sponge	Jaune (#f7cf0d)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]

Modpacks

Code	Plateforme	Couleur	Exemple
`ftb` / `feed-the-beast`	Feed The Beast	Violet (#8e44ad)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`technic`	Technic Pack	Rouge (#e74c3c)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]
`atlauncher`	ATLauncher	Bleu (#3498db)	La page Modèle:ButtonLink/styles.css n’a pas de contenu. [https://wiki.nefald.fr/ [[Fichier:ButtonLink-gray.svg	x40px	link=	alt= ]] ]

Couleurs sémantiques

Code	Alternative	Couleur	Usage
`primary`	`blue`	Bleu (#3366cc)	Actions principales
`secondary`	`gray`, `grey`	Gris (#72777d)	Actions secondaires
`success`	`green`	Vert (#14866d)	Messages de succès
`danger`	`red`	Rouge (#d73333)	Avertissements, erreurs
`warning`	`yellow`	Jaune (#fc3)	Alertes
`info`	`cyan`	Cyan (#00b8d4)	Informations
`purple`	`violet`	Violet (#6f42c1)	-
`pink`	-	Rose (#d63384)	-
`orange`	-	Orange (#fd7e14)	-
`teal`	-	Turquoise (#20c997)	-
`indigo`	-	Indigo (#6610f2)	-
`black`	-	Noir (#000)	-
`white`	-	Blanc (#fff)	-
`light`	-	Gris clair (#f8f9fa)	-
`dark`	-	Gris foncé (#343a40)	-

Exemples

Usage basique

{{Button
|link  = https://nfald.fr/discord
|text  = Rejoignez notre communauté
|style = discord
}}

La page Modèle:ButtonLink/styles.css n’a pas de contenu.

   [https://nfald.fr/discord
     [[Fichier:ButtonLink-gray.svg
       |x40px
       |link=
       |alt=Rejoignez notre Discord
     ]]
     Rejoignez notre Discord
   ]

Sans texte (icône seule)

{{Button
|link  = https://github.com/nefald
|style = github
}}

La page Modèle:ButtonLink/styles.css n’a pas de contenu.

   [https://github.com/nefald
     [[Fichier:ButtonLink-gray.svg
       |x40px
       |link=
       |alt=
     ]]
     
   ]

Couleur personnalisée

{{Button
|link  = https://exemple.fr
|image = Custom-Logo.svg
|text  = Bouton personnalisé
|background    = linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}}

Boutons d'actions

<div class="button-link-grid">
{{Button
|link  = /wiki/Spécial:Téléverser
|image = Upload-Icon.svg
|text  = Téléverser un fichier
|style = primary
}}
{{Button
|link  = /wiki/Spécial:Modifications_récentes
|image = Recent-Changes-Icon.svg
|text  = Modifications récentes
|style = info
}}
{{Button
|link  = /wiki/Spécial:Pages_demandées
|image = Wanted-Pages-Icon.svg
|text  = Pages demandées
|style = warning
}}
</div>

Détails techniques

Utilise TemplateStyles pour un CSS isolé
Entièrement responsive (adapté mobile)
Accessible (supporte les attributs alt et title)
Supporte les liens externes
Aucun JavaScript requis
Compatible tous navigateurs modernes
Les icônes de lien externe sont automatiquement masquées

Voir aussi