Modèle:Button

📚 Modèle:Button

✏️ Documentation 🎨 CSS

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	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)	Surface 0
surface-1	Surface de niveau 1	Surface 1
surface-2	Surface de niveau 2	Surface 2
surface-3	Surface de niveau 3	Surface 3
surface-4	Surface de niveau 4 (la plus foncée en mode clair, la plus claire en mode sombre)	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)	Ouvrir
twitter	Twitter/X	Bleu (#1da1f2)	Ouvrir
youtube	YouTube	Rouge (#ff0000)	Ouvrir
twitch	Twitch	Violet (#9146ff)	Ouvrir
reddit	Reddit	Orange (#ff4500)	Ouvrir
mastodon	Mastodon	Violet (#6364ff)	Ouvrir
bluesky	Bluesky	Bleu (#0085ff)	Ouvrir
linkedin	LinkedIn	Bleu (#0077b5)	Ouvrir
facebook	Facebook	Bleu (#1877f2)	Ouvrir
instagram	Instagram	Dégradé	Ouvrir
tiktok	TikTok	Noir (#000000)	Ouvrir
snapchat	Snapchat	Jaune (#fffc00)	Ouvrir
threads	Threads	Noir (#000000)	Ouvrir

Développement & Tech

Code	Plateforme	Couleur	Exemple
stackoverflow	Stack Overflow	Noir (#252627)	Ouvrir
npm	npm	Rouge (#cb3837)	Ouvrir
pypi	PyPI	Bleu (#3775a9)	Ouvrir
docker	Docker	Bleu (#2496ed)	Ouvrir
kubernetes	Kubernetes	Bleu (#326ce5)	Ouvrir
codepen	CodePen	Blanc (#ffffff)	Ouvrir
gitlab	GitLab	Orange (#fc6f23)	Ouvrir
github	GitHub	Sombre (#24292e)	Ouvrir

Plateformes de financement

Code	Plateforme	Couleur	Exemple
buymeacoffee	Buy Me a Coffee	Jaune (#ffdd00)	Ouvrir
helloasso	HelloAsso	Violet (#4C40CF)	Ouvrir
kofi	Ko-fi	Rouge (#ff5e5b)	Ouvrir
liberapay	Liberapay	Jaune (#f6c915)	Ouvrir
opencollective	Open Collective	Bleu (#7fadf2)	Ouvrir
patreon	Patreon	Rouge (#ff424d)	Ouvrir
stripe	Stripe	Violet (#635BFF)	Ouvrir

Plateformes de plugins Minecraft

Code	Plateforme	Couleur	Exemple
modrinth	Modrinth	Vert (#1bd96a)	Ouvrir
curseforge	CurseForge	Orange (#f16436)	Ouvrir
hangar	Hangar	Bleu (#0d6efd)	Ouvrir
spigotmc / spigot	SpigotMC	Jaune (#f7c03e)	Ouvrir
bukkit	Bukkit	Orange (#f89a1e)	Ouvrir
paper / paper	PaperMC	Bleu (#1a8cff)	Ouvrir
purpur	Purpur	Violet (#a855f7)	Ouvrir
polymart	Polymart	Rose (#ec4899)	Ouvrir
github-releases	GitHub Releases	Vert (#238636)	Ouvrir
jenkins	Jenkins	Rouge (#d24939)	Ouvrir
maven	Maven	Rouge (#c71a36)	Ouvrir

Mod loaders Minecraft

Code	Plateforme	Couleur	Exemple
minecraft	Minecraft	Vert (#62b47a)	Ouvrir
forge	Forge	Bleu foncé (#1e2c42)	Ouvrir
fabric	Fabric	Beige (#dbd3c8)	Ouvrir
quilt	Quilt	Violet (#8b5cf6)	Ouvrir
neoforge	NeoForge	Orange (#ff6b35)	Ouvrir

Logiciels serveur

Code	Plateforme	Couleur	Exemple
velocity	Velocity	Bleu (#3fa9f5)	Ouvrir
waterfall	Waterfall	Bleu (#0088ff)	Ouvrir
bungeecord	BungeeCord	Jaune (#ffcc00)	Ouvrir
sponge	Sponge	Jaune (#f7cf0d)	Ouvrir

Modpacks

Code	Plateforme	Couleur	Exemple
ftb / feed-the-beast	Feed The Beast	Violet (#8e44ad)	Ouvrir
technic	Technic Pack	Rouge (#e74c3c)	Ouvrir
atlauncher	ATLauncher	Bleu (#3498db)	Ouvrir

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

Rejoignez notre Discord

Sans texte (icône seule)

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

Ouvrir

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

• Modèle:IconButton
• Modèle:Bandeau
• Modèle:Couleur
• Aide:Modèles