Basculer la recherche
Basculer le menu
59
1,9 k
12
4,9 k
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:Button/doc » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
VisuelWikicode
Hiob (discussion | contributions)
owner
3 445 modifications
Creation
Balises : Modification par mobile Modification par le web mobile
 
Hiob (discussion | contributions)
owner
3 445 modifications
m exemple couleur par défaut
 
(22 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 5 : Ligne 5 :
=== Syntaxe ===
=== Syntaxe ===


<pre>
<syntaxhighlight lang="mediawiki">
{{ButtonLink
{{Button
|link       = URL du lien
|link       = URL du lien
|image     = Nom du fichier image (avec extension)
|style      = Style prédéfini (logo, couleur ou surface)
|text       = Texte affiché (optionnel)
|image       = Nom du fichier image personnalisé (optionnel)
|color      = Nom de couleur prédéfinie (optionnel)
|text       = Texte affiché (optionnel)
|bg        = Couleur d'arrière-plan personnalisée (optionnel, remplace color)
|align      = Alignement du bouton : left, right, center
|size       = Taille de l'image (défaut : x40px)
|background  = Couleur d'arrière-plan personnalisée (optionnel)
|title     = Texte du titre au survol (défaut : valeur de text)
|size       = Taille de l'image (défaut : x40px)
|alt       = Texte alternatif (défaut : valeur de text)
|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)
}}
}}
</pre>
</syntaxhighlight>


=== Paramètres ===
=== Paramètres ===


{| class="wikitable"
{| class="wikitable sortable"
! Paramètre !! Description !! Requis !! Défaut
! Paramètre !! Description !! Requis !! Défaut
|-
|-
| '''link''' || URL complète ou relative || {{Oui}} || -
| '''link''' || URL complète ou relative || Oui || -
|-
| '''style''' || Style prédéfini : nom de logo (ex : <code>discord</code>), surface (<code>surface-1</code> à <code>surface-4</code>), ou couleur générique (<code>danger</code>, <code>success</code>, 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 : <code>left</code>, <code>center</code>, <code>right</code> || 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 : <code>30px</code>, <code>56px</code>). Utile pour les boutons sans logo. || Non || 80px
|-
| '''title''' || Texte du titre HTML (infobulle au survol) || Non || valeur de '''text'''
|-
|-
| '''image''' || Nom du fichier image (ex : "Discord-Logo-White.svg") || {{Oui}} || -
| '''alt''' || Texte alternatif pour l'accessibilité || Non || valeur de '''text'''
|}
 
{{Bandeau|type=astuce
|
* **Sans paramètre `style=`** : Le bouton utilise la couleur bleue progressive du thème Citizen (<code>--background-color-progressive</code>).
* **Avec `style=surface-1` à `surface-4`** : Le bouton s'adapte automatiquement aux surfaces du thème Citizen (clair/sombre).
* **Avec `style=discord`, `style=github`, etc.** : Le logo correspondant est chargé automatiquement et la couleur de marque est appliquée.
* **Avec `background=#FF0000`** : Une couleur personnalisée remplace le style prédéfini.
* Le paramètre '''height''' est particulièrement utile pour des boutons '''sans logo''' (texte seul) afin de réduire la hauteur.
}}
 
== Styles prédéfinis ==
=== Couleur par défaut ===
 
{| class="wikitable"
! Style !! Description !! Exemple
|-
|-
| '''text''' || Texte affiché sous le logo || {{Non}} || (vide)
| || Couleur par défaut || {{Button|link=https://wiki.nefald.fr|text=Couleur par défaut}}
|}
 
=== Surfaces adaptatives (s'adaptent au thème clair/sombre) ===
 
{| class="wikitable"
! Style !! Description !! Exemple
|-
|-
| '''color''' || Nom de couleur prédéfinie (voir liste ci-dessous) || {{Non}} || gray
| <code>surface-0</code> || Surface de niveau 0 (la plus claire en mode clair, la plus foncée en mode sombre) || {{Button|link=https://wiki.nefald.fr|style=surface-0|text=Surface 0}}
|-
|-
| '''bg''' || Couleur d'arrière-plan personnalisée (hex, rgb, nom) || {{Non}} || (utilise color ou défaut)
| <code>surface-1</code> || Surface de niveau 1 || {{Button|link=https://wiki.nefald.fr|style=surface-1|text=Surface 1}}
|-
|-
| '''size''' || Taille de l'image (format MediaWiki) || {{Non}} || x40px
| <code>surface-2</code> || Surface de niveau 2 || {{Button|link=https://wiki.nefald.fr|style=surface-2|text=Surface 2}}
|-
|-
| '''title''' || Texte du titre HTML (infobulle au survol) || {{Non}} || valeur de '''text'''
| <code>surface-3</code> || Surface de niveau 3 || {{Button|link=https://wiki.nefald.fr|style=surface-3|text=Surface 3}}
|-
|-
| '''alt''' || Texte alternatif pour l'accessibilité || {{Non}} || valeur de '''text'''
| <code>surface-4</code> || Surface de niveau 4 (la plus foncée en mode clair, la plus claire en mode sombre) || {{Button|link=https://wiki.nefald.fr|style=surface-4|text=Surface 4}}
|}
|}


'''Note :''' Si '''color''' et '''bg''' sont tous deux spécifiés, '''bg''' est prioritaire.
{{Bandeau|type=info|Les surfaces utilisent les variables CSS du thème Citizen (<code>--color-surface-X</code>) et s'adaptent automatiquement au mode clair/sombre.}}


== Couleurs prédéfinies ==
== Couleurs prédéfinies ==
Ligne 49 : Ligne 89 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>discord</code> || Discord || Blurple (#5865f2) || <code>{{l|ButtonLink|color=discord}}</code>
| <code>discord</code> || Discord || violet (#5865f2) || {{Button|link=https://wiki.nefald.fr/|style= discord}}
|-
| <code>patreon</code> || Patreon || Rouge (#ff424d) || <code>{{l|ButtonLink|color=patreon}}</code>
|-
| <code>gitlab</code> || GitLab || Orange (#fc6f23) || <code>{{l|ButtonLink|color=gitlab}}</code>
|-
| <code>github</code> || GitHub || Sombre (#24292e) || <code>{{l|ButtonLink|color=github}}</code>
|-
|-
| <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || <code>{{l|ButtonLink|color=twitter}}</code>
| <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || {{Button|link=https://wiki.nefald.fr/|style= twitter}}
|-
|-
| <code>youtube</code> || YouTube || Rouge (#ff0000) || <code>{{l|ButtonLink|color=youtube}}</code>
| <code>youtube</code> || YouTube || Rouge (#ff0000) || {{Button|link=https://wiki.nefald.fr/|style= youtube}}
|-
|-
| <code>twitch</code> || Twitch || Violet (#9146ff) || <code>{{l|ButtonLink|color=twitch}}</code>
| <code>twitch</code> || Twitch || Violet (#9146ff) || {{Button|link=https://wiki.nefald.fr/|style= twitch}}
|-
|-
| <code>reddit</code> || Reddit || Orange (#ff4500) || <code>{{l|ButtonLink|color=reddit}}</code>
| <code>reddit</code> || Reddit || Orange (#ff4500) || {{Button|link=https://wiki.nefald.fr/|style= reddit}}
|-
|-
| <code>mastodon</code> || Mastodon || Violet (#6364ff) || <code>{{l|ButtonLink|color=mastodon}}</code>
| <code>mastodon</code> || Mastodon || Violet (#6364ff) || {{Button|link=https://wiki.nefald.fr/|style= mastodon}}
|-
|-
| <code>bluesky</code> || Bluesky || Bleu (#0085ff) || <code>{{l|ButtonLink|color=bluesky}}</code>
| <code>bluesky</code> || Bluesky || Bleu (#0085ff) || {{Button|link=https://wiki.nefald.fr/|style= bluesky}}
|-
|-
| <code>linkedin</code> || LinkedIn || Bleu (#0077b5) || <code>{{l|ButtonLink|color=linkedin}}</code>
| <code>linkedin</code> || LinkedIn || Bleu (#0077b5) || {{Button|link=https://wiki.nefald.fr/|style= linkedin}}
|-
|-
| <code>facebook</code> || Facebook || Bleu (#1877f2) || <code>{{l|ButtonLink|color=facebook}}</code>
| <code>facebook</code> || Facebook || Bleu (#1877f2) || {{Button|link=https://wiki.nefald.fr/|style= facebook}}
|-
|-
| <code>instagram</code> || Instagram || Dégradé || <code>{{l|ButtonLink|color=instagram}}</code>
| <code>instagram</code> || Instagram || Dégradé || {{Button|link=https://wiki.nefald.fr/|style= instagram}}
|-
|-
| <code>tiktok</code> || TikTok || Noir (#000000) || <code>{{l|ButtonLink|color=tiktok}}</code>
| <code>tiktok</code> || TikTok || Noir (#000000) || {{Button|link=https://wiki.nefald.fr/|style= tiktok}}
|-
|-
| <code>snapchat</code> || Snapchat || Jaune (#fffc00) || <code>{{l|ButtonLink|color=snapchat}}</code>
| <code>snapchat</code> || Snapchat || Jaune (#fffc00) || {{Button|link=https://wiki.nefald.fr/|style= snapchat}}
|-
|-
| <code>threads</code> || Threads || Noir (#000000) || <code>{{l|ButtonLink|color=threads}}</code>
| <code>threads</code> || Threads || Noir (#000000) || {{Button|link=https://wiki.nefald.fr/|style= threads}}
|}
|}


Ligne 87 : Ligne 121 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>stackoverflow</code> || Stack Overflow || Orange (#f48024) || <code>{{l|ButtonLink|color=stackoverflow}}</code>
| <code>stackoverflow</code> || Stack Overflow || Noir (#252627) || {{Button|link=https://wiki.nefald.fr/|style= stackoverflow}}
|-
| <code>npm</code> || npm || Rouge (#cb3837) || {{Button|link=https://wiki.nefald.fr/|style= npm}}
|-
|-
| <code>npm</code> || npm || Rouge (#cb3837) || <code>{{l|ButtonLink|color=npm}}</code>
| <code>pypi</code> || PyPI || Bleu (#3775a9) || {{Button|link=https://wiki.nefald.fr/|style= pypi}}
|-
|-
| <code>pypi</code> || PyPI || Bleu (#3775a9) || <code>{{l|ButtonLink|color=pypi}}</code>
| <code>docker</code> || Docker || Bleu (#2496ed) || {{Button|link=https://wiki.nefald.fr/|style= docker}}
|-
|-
| <code>docker</code> || Docker || Bleu (#2496ed) || <code>{{l|ButtonLink|color=docker}}</code>
| <code>kubernetes</code> || Kubernetes || Bleu (#326ce5) || {{Button|link=https://wiki.nefald.fr/|style= kubernetes}}
|-
|-
| <code>kubernetes</code> || Kubernetes || Bleu (#326ce5) || <code>{{l|ButtonLink|color=kubernetes}}</code>
| <code>codepen</code> || CodePen || Blanc (#ffffff) || {{Button|link=https://wiki.nefald.fr/|style= codepen}}
|-
|-
| <code>codepen</code> || CodePen || Noir (#000000) || <code>{{l|ButtonLink|color=codepen}}</code>
| <code>gitlab</code> || GitLab || Orange (#fc6f23) || {{Button|link=https://wiki.nefald.fr/|style= gitlab}}
|-
|-
| <code>gitlab-ci</code> || GitLab CI || Orange (#fc6d26) || <code>{{l|ButtonLink|color=gitlab-ci}}</code>
| <code>github</code> || GitHub || Sombre (#24292e) || {{Button|link=https://wiki.nefald.fr/|style= github}}
|}
|}


Ligne 107 : Ligne 143 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>kofi</code> || Ko-fi || Rouge (#ff5e5b) || <code>{{l|ButtonLink|color=kofi}}</code>
| <code>buymeacoffee</code> || Buy Me a Coffee || Jaune (#ffdd00) || {{Button|link=https://wiki.nefald.fr/|style= buymeacoffee}}
|-
| <code>helloasso</code> || HelloAsso || Violet (#4C40CF) || {{Button|link=https://wiki.nefald.fr/|style= helloasso}}
|-
| <code>kofi</code> || Ko-fi || Rouge (#ff5e5b) || {{Button|link=https://wiki.nefald.fr/|style= kofi}}
|-
| <code>liberapay</code> || Liberapay || Jaune (#f6c915) || {{Button|link=https://wiki.nefald.fr/|style= liberapay}}
|-
|-
| <code>liberapay</code> || Liberapay || Jaune (#f6c915) || <code>{{l|ButtonLink|color=liberapay}}</code>
| <code>opencollective</code> || Open Collective || Bleu (#7fadf2) || {{Button|link=https://wiki.nefald.fr/|style= opencollective}}
|-
|-
| <code>buymeacoffee</code> || Buy Me a Coffee || Jaune (#ffdd00) || <code>{{l|ButtonLink|color=buymeacoffee}}</code>
| <code>patreon</code> || Patreon || Rouge (#ff424d) || {{Button|link=https://wiki.nefald.fr/|style= patreon}}
|-
|-
| <code>opencollective</code> || Open Collective || Bleu (#7fadf2) || <code>{{l|ButtonLink|color=opencollective}}</code>
| <code>stripe</code> || Stripe || Violet (#635BFF) || {{Button|link=https://wiki.nefald.fr/|style= stripe}}
|}
|}


Ligne 121 : Ligne 163 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>modrinth</code> || Modrinth || Vert (#1bd96a) || <code>{{l|ButtonLink|color=modrinth}}</code>
| <code>modrinth</code> || Modrinth || Vert (#1bd96a) || {{Button|link=https://wiki.nefald.fr/|style= modrinth}}
|-
|-
| <code>curseforge</code> || CurseForge || Orange (#f16436) || <code>{{l|ButtonLink|color=curseforge}}</code>
| <code>curseforge</code> || CurseForge || Orange (#f16436) || {{Button|link=https://wiki.nefald.fr/|style= curseforge}}
|-
|-
| <code>hangar</code> || Hangar || Bleu (#0d6efd) || <code>{{l|ButtonLink|color=hangar}}</code>
| <code>hangar</code> || Hangar || Bleu (#0d6efd) || {{Button|link=https://wiki.nefald.fr/|style= hangar}}
|-
|-
| <code>spigotmc</code> / <code>spigot</code> || SpigotMC || Jaune (#f7c03e) || <code>{{l|ButtonLink|color=spigot}}</code>
| <code>spigotmc</code> / <code>spigot</code> || SpigotMC || Jaune (#f7c03e) || {{Button|link=https://wiki.nefald.fr/|style= spigot}}
|-
|-
| <code>bukkit</code> || Bukkit || Orange (#f89a1e) || <code>{{l|ButtonLink|color=bukkit}}</code>
| <code>bukkit</code> || Bukkit || Orange (#f89a1e) || {{Button|link=https://wiki.nefald.fr/|style= bukkit}}
|-
|-
| <code>papermc</code> / <code>paper</code> || PaperMC || Bleu (#1a8cff) || <code>{{l|ButtonLink|color=paper}}</code>
| <code>paper</code> / <code>paper</code> || PaperMC || Bleu (#1a8cff) || {{Button|link=https://wiki.nefald.fr/|style= paper}}
|-
|-
| <code>purpur</code> || Purpur || Violet (#a855f7) || <code>{{l|ButtonLink|color=purpur}}</code>
| <code>purpur</code> || Purpur || Violet (#a855f7) || {{Button|link=https://wiki.nefald.fr/|style= purpur}}
|-
|-
| <code>polymart</code> || Polymart || Rose (#ec4899) || <code>{{l|ButtonLink|color=polymart}}</code>
| <code>polymart</code> || Polymart || Rose (#ec4899) || {{Button|link=https://wiki.nefald.fr/|style= polymart}}
|-
|-
| <code>github-releases</code> || GitHub Releases || Vert (#238636) || <code>{{l|ButtonLink|color=github-releases}}</code>
| <code>github-releases</code> || GitHub Releases || Vert (#238636) || {{Button|link=https://wiki.nefald.fr/|style= github-releases}}
|-
|-
| <code>jenkins</code> || Jenkins || Rouge (#d24939) || <code>{{l|ButtonLink|color=jenkins}}</code>
| <code>jenkins</code> || Jenkins || Rouge (#d24939) || {{Button|link=https://wiki.nefald.fr/|style= jenkins}}
|-
|-
| <code>maven</code> || Maven || Rouge (#c71a36) || <code>{{l|ButtonLink|color=maven}}</code>
| <code>maven</code> || Maven || Rouge (#c71a36) || {{Button|link=https://wiki.nefald.fr/|style= maven}}
|}
|}


Ligne 149 : Ligne 191 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>minecraft</code> || Minecraft || Vert (#62b47a) || <code>{{l|ButtonLink|color=minecraft}}</code>
| <code>minecraft</code> || Minecraft || Vert (#62b47a) || {{Button|link=https://wiki.nefald.fr/|style= minecraft}}
|-
|-
| <code>forge</code> || Forge || Bleu foncé (#1e2c42) || <code>{{l|ButtonLink|color=forge}}</code>
| <code>forge</code> || Forge || Bleu foncé (#1e2c42) || {{Button|link=https://wiki.nefald.fr/|style= forge}}
|-
|-
| <code>fabric</code> || Fabric || Beige (#dbd3c8) || <code>{{l|ButtonLink|color=fabric}}</code>
| <code>fabric</code> || Fabric || Beige (#dbd3c8) || {{Button|link=https://wiki.nefald.fr/|style= fabric}}
|-
|-
| <code>quilt</code> || Quilt || Violet (#8b5cf6) || <code>{{l|ButtonLink|color=quilt}}</code>
| <code>quilt</code> || Quilt || Violet (#8b5cf6) || {{Button|link=https://wiki.nefald.fr/|style= quilt}}
|-
|-
| <code>neoforge</code> || NeoForge || Orange (#ff6b35) || <code>{{l|ButtonLink|color=neoforge}}</code>
| <code>neoforge</code> || NeoForge || Orange (#ff6b35) || {{Button|link=https://wiki.nefald.fr/|style= neoforge}}
|}
|}


Ligne 165 : Ligne 207 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>velocity</code> || Velocity || Bleu (#3fa9f5) || <code>{{l|ButtonLink|color=velocity}}</code>
| <code>velocity</code> || Velocity || Bleu (#3fa9f5) || {{Button|link=https://wiki.nefald.fr/|style= velocity}}
|-
|-
| <code>waterfall</code> || Waterfall || Bleu (#0088ff) || <code>{{l|ButtonLink|color=waterfall}}</code>
| <code>waterfall</code> || Waterfall || Bleu (#0088ff) || {{Button|link=https://wiki.nefald.fr/|style= waterfall}}
|-
|-
| <code>bungeecord</code> || BungeeCord || Jaune (#ffcc00) || <code>{{l|ButtonLink|color=bungeecord}}</code>
| <code>bungeecord</code> || BungeeCord || Jaune (#ffcc00) || {{Button|link=https://wiki.nefald.fr/|style= bungeecord}}
|-
|-
| <code>sponge</code> || Sponge || Jaune (#f7cf0d) || <code>{{l|ButtonLink|color=sponge}}</code>
| <code>sponge</code> || Sponge || Jaune (#f7cf0d) || {{Button|link=https://wiki.nefald.fr/|style= sponge}}
|}
|}


Ligne 179 : Ligne 221 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>ftb</code> / <code>feed-the-beast</code> || Feed The Beast || Violet (#8e44ad) || <code>{{l|ButtonLink|color=ftb}}</code>
| <code>ftb</code> / <code>feed-the-beast</code> || Feed The Beast || Violet (#8e44ad) || {{Button|link=https://wiki.nefald.fr/|style= ftb}}
|-
|-
| <code>technic</code> || Technic Pack || Rouge (#e74c3c) || <code>{{l|ButtonLink|color=technic}}</code>
| <code>technic</code> || Technic Pack || Rouge (#e74c3c) || {{Button|link=https://wiki.nefald.fr/|style= technic}}
|-
|-
| <code>atlauncher</code> || ATLauncher || Bleu (#3498db) || <code>{{l|ButtonLink|color=atlauncher}}</code>
| <code>atlauncher</code> || ATLauncher || Bleu (#3498db) || {{Button|link=https://wiki.nefald.fr/|style= atlauncher}}
|}
|}


Ligne 227 : Ligne 269 :


<pre>
<pre>
{{ButtonLink
{{Button
|link  = https://nfald.fr/discord
|link  = https://nfald.fr/discord
|image = Discord-Logo-White.svg
|text  = Rejoignez notre communauté
|text  = Rejoignez notre Discord
|style = discord
|color = discord
}}
}}
</pre>
</pre>


{{ButtonLink
{{Button
|link  = https://nfald.fr/discord
|link  = https://nfald.fr/discord
|image = Discord-Logo-White.svg
|text  = Rejoignez notre Discord
|text  = Rejoignez notre Discord
|color = discord
|style = discord
}}
}}


Ligne 245 : Ligne 285 :


<pre>
<pre>
{{ButtonLink
{{Button
|link  = https://github.com/nefald
|link  = https://github.com/nefald
|image = GitHub-Logo-White.svg
|style = github
|color = github
}}
}}
</pre>
</pre>


{{ButtonLink
{{Button
|link  = https://github.com/nefald
|link  = https://github.com/nefald
|image = GitHub-Logo-White.svg
|style = github
|color = github
}}
 
=== Lien interne ===
 
<pre>
{{ButtonLink
|link  = /wiki/Aide:Sommaire
|image = Help-Icon.svg
|text  = Centre d'aide
|color = primary
}}
</pre>
 
{{ButtonLink
|link  = /wiki/Aide:Sommaire
|image = Help-Icon.svg
|text  = Centre d'aide
|color = primary
}}
}}


Ligne 279 : Ligne 299 :


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


=== Grille de téléchargements multi-plateformes ===


<pre>
<div class="button-link-grid">
{{ButtonLink
|link  = https://modrinth.com/plugin/mon-plugin
|image = Modrinth-Logo.svg
|text  = Modrinth
|color = modrinth
}}
{{ButtonLink
|link  = https://www.curseforge.com/minecraft/bukkit-plugins/mon-plugin
|image = CurseForge-Logo.svg
|text  = CurseForge
|color = curseforge
}}
{{ButtonLink
|link  = https://hangar.papermc.io/nefald/MonPlugin
|image = Hangar-Logo.svg
|text  = Hangar
|color = hangar
}}
{{ButtonLink
|link  = https://www.spigotmc.org/resources/mon-plugin.12345/
|image = Spigot-Logo.svg
|text  = SpigotMC
|color = spigot
}}
{{ButtonLink
|link  = https://polymart.org/resource/mon-plugin.1234
|image = Polymart-Logo.svg
|text  = Polymart
|color = polymart
}}
{{ButtonLink
|link  = https://github.com/nefald/MonPlugin/releases
|image = GitHub-Logo-White.svg
|text  = GitHub
|color = github-releases
}}
</div>
</pre>
<div class="button-link-grid">
{{ButtonLink
|link  = https://modrinth.com/plugin/mon-plugin
|image = Modrinth-Logo.svg
|text  = Modrinth
|color = modrinth
}}
{{ButtonLink
|link  = https://www.curseforge.com/minecraft/bukkit-plugins/mon-plugin
|image = CurseForge-Logo.svg
|text  = CurseForge
|color = curseforge
}}
{{ButtonLink
|link  = https://hangar.papermc.io/nefald/MonPlugin
|image = Hangar-Logo.svg
|text  = Hangar
|color = hangar
}}
{{ButtonLink
|link  = https://www.spigotmc.org/resources/mon-plugin.12345/
|image = Spigot-Logo.svg
|text  = SpigotMC
|color = spigot
}}
{{ButtonLink
|link  = https://polymart.org/resource/mon-plugin.1234
|image = Polymart-Logo.svg
|text  = Polymart
|color = polymart
}}
{{ButtonLink
|link  = https://github.com/nefald/MonPlugin/releases
|image = GitHub-Logo-White.svg
|text  = GitHub
|color = github-releases
}}
</div>
=== Rangée de réseaux sociaux ===
<pre>
<div class="button-link-grid">
{{ButtonLink|link=https://discord.gg/xxx|image=Discord-Logo-White.svg|color=discord}}
{{ButtonLink|link=https://twitter.com/xxx|image=Twitter-Logo-White.svg|color=twitter}}
{{ButtonLink|link=https://github.com/xxx|image=GitHub-Logo-White.svg|color=github}}
{{ButtonLink|link=https://www.patreon.com/xxx|image=Patreon-Logo-White.svg|color=patreon}}
</div>
</pre>


=== Boutons d'actions ===
=== Boutons d'actions ===
Ligne 384 : Ligne 313 :
<pre>
<pre>
<div class="button-link-grid">
<div class="button-link-grid">
{{ButtonLink
{{Button
|link  = /wiki/Spécial:Téléverser
|link  = /wiki/Spécial:Téléverser
|image = Upload-Icon.svg
|image = Upload-Icon.svg
|text  = Téléverser un fichier
|text  = Téléverser un fichier
|color = primary
|style = primary
}}
}}
{{ButtonLink
{{Button
|link  = /wiki/Spécial:Modifications_récentes
|link  = /wiki/Spécial:Modifications_récentes
|image = Recent-Changes-Icon.svg
|image = Recent-Changes-Icon.svg
|text  = Modifications récentes
|text  = Modifications récentes
|color = info
|style = info
}}
}}
{{ButtonLink
{{Button
|link  = /wiki/Spécial:Pages_demandées
|link  = /wiki/Spécial:Pages_demandées
|image = Wanted-Pages-Icon.svg
|image = Wanted-Pages-Icon.svg
|text  = Pages demandées
|text  = Pages demandées
|color = warning
|style = warning
}}
}}
</div>
</div>
Ligne 410 : Ligne 339 :
* Entièrement responsive (adapté mobile)
* Entièrement responsive (adapté mobile)
* Accessible (supporte les attributs alt et title)
* Accessible (supporte les attributs alt et title)
* Supporte les liens externes et internes
* Supporte les liens externes
* Aucun JavaScript requis
* Aucun JavaScript requis
* Compatible tous navigateurs modernes
* Compatible tous navigateurs modernes
* Les icônes de lien externe sont automatiquement masquées
* Les icônes de lien externe sont automatiquement masquées
== Accessibilité ==
Le modèle est conçu pour être accessible :
* Utilisation d'attributs <code>alt</code> pour les images
* Attributs <code>title</code> pour les infobulles
* Contraste de couleur respectant les normes WCAG
* Navigation au clavier possible
* Compatible avec les lecteurs d'écran


== Voir aussi ==
== Voir aussi ==


* [[Modèle:Bouton]]
* [[Modèle:IconButton]]
* [[Modèle:Icône]]
* [[Modèle:Bandeau]]
* [[Modèle:Bandeau]]
* [[Modèle:Couleur]]
* [[Modèle:Couleur]]
* [[Aide:Modèles]]
* [[Aide:Modèles]]


<includeonly>[[Catégorie:Modèles de lien]][[Catégorie:Modèles de bouton]][[Catégorie:Modèles d'interface]]</includeonly>
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>

Dernière version du 11 février 2026 à 14:31

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

Couleurs prédéfinies

Réseaux sociaux

Code Plateforme Couleur Exemple
discord Discord violet (#5865f2)
Fichier:Button-discord.svg
twitter Twitter/X Bleu (#1da1f2)
youtube YouTube Rouge (#ff0000)
Fichier:Button-youtube.svg
twitch Twitch Violet (#9146ff)
Fichier:Button-twitch.svg
reddit Reddit Orange (#ff4500)
Fichier:Button-reddit.svg
mastodon Mastodon Violet (#6364ff)
Fichier:Button-mastodon.svg
bluesky Bluesky Bleu (#0085ff)
Fichier:Button-bluesky.svg
linkedin LinkedIn Bleu (#0077b5)
Fichier:Button-linkedin.svg
facebook Facebook Bleu (#1877f2)
instagram Instagram Dégradé
Fichier:Button-instagram.svg
tiktok TikTok Noir (#000000)
Fichier:Button-tiktok.svg
snapchat Snapchat Jaune (#fffc00)
Fichier:Button-snapchat.svg
threads Threads Noir (#000000)
Fichier:Button-threads.svg

Développement & Tech

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

Plateformes de financement

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

Plateformes de plugins Minecraft

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

Mod loaders Minecraft

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

Logiciels serveur

Code Plateforme Couleur Exemple
velocity Velocity Bleu (#3fa9f5)
Fichier:Button-velocity.svg
waterfall Waterfall Bleu (#0088ff)
Fichier:Button-waterfall.svg
bungeecord BungeeCord Jaune (#ffcc00)
Fichier:Button-bungeecord.svg
sponge Sponge Jaune (#f7cf0d)
Fichier:Button-sponge.svg

Modpacks

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

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 Rejoignez notre Discord

Sans texte (icône seule)

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

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

Récupérée de "https://wiki.nefald.fr/index.php?title=Modèle:Button/doc&oldid=4803"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.