CSS Gold Button Generator

En quoi consiste cet outil ?

Cet outil applique un dégradé linéaire prédéfini à trois points d'arrêt pour chaque style métallique, ajusté pour ressembler à la lumière se reflétant sur une surface métallique polie.

Basculez entre or, argent, bronze et or rose grâce au sélecteur de style, chacun avec son propre dégradé, sa couleur de texte et son ombre ajustés à ce métal.

Un aperçu en direct se met à jour instantanément pendant que vous saisissez le texte du bouton, changez de style ou ajustez le rayon des coins, afin que vous voyiez exactement le rendu avant de copier le CSS.

Pourquoi l'utiliser ?

• Vous lancez une page tarifaire avec une offre "Premium" ou "VIP" et voulez que le bouton d'abonnement soit à la hauteur du prix, pas un bouton gris générique de framework CSS.
• Un client e-commerce vous demande que le bouton "Acheter maintenant" de sa boutique de bijoux ou de montres transmette le luxe, et un bouton bleu plat ne le fait pas — le style Or ou Bronze colle à l'esthétique du produit.
• Vous concevez un badge ou certificat numérique "Succès débloqué" pour une app de gamification et voulez que le sceau paraisse métallique, pas un simple badge de couleur unie.
• Vous voulez construire les trois niveaux d'adhésion de votre site (bronze, argent, or) avec des boutons qui reflètent visuellement la hiérarchie, plutôt que d'utiliser la même couleur pour les trois offres.
• Vous avez testé le style Or mais votre marque utilise des tons plus froids et élégants — passez à Argent ou Or Rose et comparez dans l'aperçu ce qui s'harmonise le mieux avec votre palette.
• Vous devez ajuster le rayon des coins pour que le bouton s'accorde au reste de votre système de design (coins très arrondis ou presque droits) sans perdre l'effet de brillance métallique.

Mode d'emploi

1. Saisissez le texte de votre bouton.
2. Choisissez un style métallique — or, argent, bronze ou or rose.
3. Ajustez le curseur de rayon de bordure pour l'adapter au style d'angles de votre design.
4. Cliquez sur « Copier » pour copier le code CSS généré et collez-le dans votre feuille de style.

Exemple

Entrée

Text: "Buy Now", Style: Gold, Radius: 8

Résultat

background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;

Le CSS généré combine un dégradé métallique à trois points d'arrêt, une couleur de texte et une ombre assorties, ainsi qu'un padding de bouton standard pour un bloc de style prêt à l'emploi.

Styles métalliques en un coup d'œil

Chaque style métallique utilise son propre dégradé, sa propre couleur de texte et sa propre couleur d'ombre, spécialement ajustés.

Outils associés

Pour d'autres générateurs CSS, essayez ceux-ci.

→ Générateur de Texte Néon · Générateur de Texte en Relief CSS · Générateur de Border Radius

Choisir le bon métal selon le contexte

Chaque finition métallique véhicule une sensation différente, et un mauvais choix peut faire paraître le bouton déplacé par rapport au reste du design.

• Or communique le premium ou l'exclusif — idéal pour l'offre la plus chère d'une grille tarifaire ou un bouton de checkout à forte valeur.
• Argent convient bien aux actions secondaires importantes, comme « Voir les détails » sur une offre intermédiaire, sans concurrencer visuellement un bouton Or à proximité.
• Bronze s'associe naturellement à la troisième place ou au niveau d'entrée — utilisez-le pour l'offre de base dans une hiérarchie à trois niveaux.
• Or Rose convient mieux aux marques orientées mode, beauté ou lifestyle, où le ton chaud et doux paraît plus approprié que l'or classique.

Foire aux questions