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
Styles prédéfinis Couleur par défaut
Style
Description
Exemple
Couleur par défaut
Surfaces adaptatives (s'adaptent au thème clair/sombre)
Style
Description
Exemple
surface-0Surface de niveau 0 (la plus claire en mode clair, la plus foncée en mode sombre)
surface-1Surface de niveau 1
surface-2Surface de niveau 2
surface-3Surface de niveau 3
surface-4Surface de niveau 4 (la plus foncée en mode clair, la plus claire en mode sombre)
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
discordDiscord
violet (#5865f2)
twitterTwitter/X
Bleu (#1da1f2)
youtubeYouTube
Rouge (#ff0000)
twitchTwitch
Violet (#9146ff)
redditReddit
Orange (#ff4500)
mastodonMastodon
Violet (#6364ff)
blueskyBluesky
Bleu (#0085ff)
linkedinLinkedIn
Bleu (#0077b5)
facebookFacebook
Bleu (#1877f2)
instagramInstagram
Dégradé
tiktokTikTok
Noir (#000000)
snapchatSnapchat
Jaune (#fffc00)
threadsThreads
Noir (#000000)
Développement & Tech
Code
Plateforme
Couleur
Exemple
stackoverflowStack Overflow
Noir (#252627)
npmnpm
Rouge (#cb3837)
pypiPyPI
Bleu (#3775a9)
dockerDocker
Bleu (#2496ed)
kubernetesKubernetes
Bleu (#326ce5)
codepenCodePen
Blanc (#ffffff)
gitlabGitLab
Orange (#fc6f23)
githubGitHub
Sombre (#24292e)
Plateformes de financement
Code
Plateforme
Couleur
Exemple
buymeacoffeeBuy Me a Coffee
Jaune (#ffdd00)
helloassoHelloAsso
Violet (#4C40CF)
kofiKo-fi
Rouge (#ff5e5b)
liberapayLiberapay
Jaune (#f6c915)
opencollectiveOpen Collective
Bleu (#7fadf2)
patreonPatreon
Rouge (#ff424d)
stripeStripe
Violet (#635BFF)
Plateformes de plugins Minecraft
Code
Plateforme
Couleur
Exemple
modrinthModrinth
Vert (#1bd96a)
curseforgeCurseForge
Orange (#f16436)
hangarHangar
Bleu (#0d6efd)
spigotmc / spigotSpigotMC
Jaune (#f7c03e)
bukkitBukkit
Orange (#f89a1e)
paper / paperPaperMC
Bleu (#1a8cff)
purpurPurpur
Violet (#a855f7)
polymartPolymart
Rose (#ec4899)
github-releasesGitHub Releases
Vert (#238636)
jenkinsJenkins
Rouge (#d24939)
mavenMaven
Rouge (#c71a36)
Mod loaders Minecraft
Code
Plateforme
Couleur
Exemple
minecraftMinecraft
Vert (#62b47a)
forgeForge
Bleu foncé (#1e2c42)
fabricFabric
Beige (#dbd3c8)
quiltQuilt
Violet (#8b5cf6)
neoforgeNeoForge
Orange (#ff6b35)
Logiciels serveur
Code
Plateforme
Couleur
Exemple
velocityVelocity
Bleu (#3fa9f5)
waterfallWaterfall
Bleu (#0088ff)
bungeecordBungeeCord
Jaune (#ffcc00)
spongeSponge
Jaune (#f7cf0d)
Modpacks
Code
Plateforme
Couleur
Exemple
ftb / feed-the-beastFeed The Beast
Violet (#8e44ad)
technicTechnic Pack
Rouge (#e74c3c)
atlauncherATLauncher
Bleu (#3498db)
Couleurs sémantiques
Code
Alternative
Couleur
Usage
primaryblueBleu (#3366cc)
Actions principales
secondarygray, greyGris (#72777d)
Actions secondaires
successgreenVert (#14866d)
Messages de succès
dangerredRouge (#d73333)
Avertissements, erreurs
warningyellowJaune (#fc3)
Alertes
infocyanCyan (#00b8d4)
Informations
purplevioletViolet (#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
}}
Sans texte (icône seule) {{Button
|link = https://github.com/nefald
|style = github
}}
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 
