Atelier des Boutons Modulaires
✦ Façonnez vos formes et vos styles en toute simplicité ✦
🛠️ Comment personnaliser et utiliser vos boutons sur CREATIVE PAGE :
1. Copier le Bloc : Sélectionnez et copiez l'intégralité de la zone noire du bouton de votre choix ci-dessous.
2. Intégrer le Code : Dans votre logiciel CREATIVE PAGE, basculez votre éditeur en mode Code source / HTML, puis collez-y la ligne à l'endroit désiré.
3. Modifier le Texte : Revenez en mode visuel direct. Cliquez directement sur le texte de l'exemple (ex: "Feuille de Menthe") pour le surligner et écrivez votre propre message à la place.
4. Ajouter un lien : Restez en mode visuel, sélectionnez votre texte personnalisé, cliquez sur l'icône de Lien (Maillon de chaîne 🔗) dans votre barre d'outils, puis tapez l'adresse de votre page cible à la place du symbole
#.1. Modèles de Formes & Épaisseurs Inédits
Bouton Glacé Menthe - Forme Carrée Droite & Double Ligne Fine
🍃 Feuille de Menthe
<a href="#" style="display:inline-block;text-decoration:none;background:#e6fcf5;color:#0ca678;border:4px double #0ca678;padding:12px 30px;border-radius:0px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;letter-spacing:0.5px;box-shadow:0 4px 12px rgba(12,166,120,0.15);">🍃 Feuille de Menthe</a>
Bouton Crème Caramel - Forme Pilule Galet & Bordure Épaisse Solide
🍯 Coulée de Caramel
<a href="#" style="display:inline-block;text-decoration:none;background:#fff4e6;color:#d9480f;border:4px solid #f76707;padding:14px 40px;border-radius:50px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;box-shadow:0 6px 16px rgba(247,103,7,0.15);">🍯 Coulée de Caramel</a>
2. Modèles de Dégradés & Ombres Portées Graphiques
Bouton Rubis Étincelant - Forme Arrondie Douce & Dégradé Sanguin Lumineux
🌹 Cristal Rubis
<a href="#" style="display:inline-block;text-decoration:none;background:linear-gradient(135deg,#ff8787 0%,#e03131 100%);color:#ffffff;border:2px solid #ffa8a8;padding:12px 32px;border-radius:12px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;box-shadow:0 8px 20px rgba(224,49,49,0.35);">🌹 Cristal Rubis</a>
Bouton Ébène Mystique - Forme Ovale Compacte & Ombre Décalée Blocky
Bouton Ébène Mystique - Forme Ovale Compacte & Ombre Décalée Blocky
🌌 Cœur d'Ébène
<a href="#" style="display:inline-block;text-decoration:none;background:#1e1b4b;color:#e0e7ff;border:3px solid #4338ca;padding:10px 26px;border-radius:6px;font-family:'Segoe UI',sans-serif;font-size:14px;font-weight:bold;text-transform:uppercase;box-shadow:6px 6px 0px #312e81;">🌌 Cœur d'Ébène</a>
3. Formes Géométriques Avancées (Rond, Carré, Rectangle, Amande, Ovales)
Bouton Rond Parfait - Style Pastille Myrtille (Idéal pour les icônes ou les petits raccourcis)
🫐
<a href="#" style="display:flex;align-items:center;justify-content:center;text-decoration:none;background:#e0e7ff;color:#4338ca;border:3px solid #4338ca;width:60px;height:60px;border-radius:50%;font-size:1.5rem;box-shadow:0 4px 10px rgba(67,56,202,0.2);box-sizing:border-box;">🫐</a>
Bouton Carré Strict & Symétrique - Style Acidulé Pamplemousse (border-radius: 0px et dimensions égales)
🍊ZESTE
<a href="#" style="display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;background:#fff5f5;color:#c92a2a;border:3px dashed #f03e3e;width:90px;height:90px;border-radius:0px;font-family:'Segoe UI',sans-serif;font-size:12px;font-weight:bold;text-align:center;box-shadow:0 4px 12px rgba(240,62,62,0.15);box-sizing:border-box;line-height:1.3;">🍊<br>ZESTE</a>
Gros Rectangle Massif - Style Bloc Pistache Douce (Idéal pour une action principale très visible)
🌱 Valider le Panier d'Achat
<a href="#" style="display:inline-block;text-decoration:none;background:#f4fce3;color:#2b8a3e;border:4px solid #37b24d;padding:18px 65px;border-radius:4px;font-family:'Segoe UI',sans-serif;font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:1px;box-shadow:0 8px 25px rgba(55,178,77,0.2);">🌱 Valider le Panier d'Achat</a>
Bouton Forme Amande / Feuille Stylisée - Style Citronnelle Grivée (Deux coins opposés arrondis à 25px, les deux autres à 0px)
🍋 Esprit Nature
<a href="#" style="display:inline-block;text-decoration:none;background:#fef9e7;color:#9a7d0a;border:3px solid #f4d03f;padding:12px 35px;border-radius:25px 0px 25px 0px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;box-shadow:0 5px 15px rgba(244,208,63,0.2);">🍋 Esprit Nature</a>
Bouton Ovale Vertical - Style Capsule Prune Mystique (Plus haut que large pour un design asymétrique original)
🍇VOIR
PLUS
<a href="#" style="display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;background:#3b1e3e;color:#f3e5f5;border:3px solid #ab47bc;width:75px;height:120px;border-radius:40px;font-family:'Segoe UI',sans-serif;font-size:13px;font-weight:bold;text-align:center;box-sizing:border-box;line-height:1.4;box-shadow:0 6px 16px rgba(171,71,188,0.25);">🍇<br>VOIR<br>PLUS</a>
Bouton Ovale Horizontal - Style Galet Abricot Fondu (Rapport d'étirement large avec des bordures très fluides)
🍑 Défilement
<a href="#" style="display:inline-block;text-decoration:none;background:#fff3e0;color:#e65100;border:3px solid #ffb74d;padding:10px 55px;border-radius:100px / 50px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;box-shadow:0 4px 15px rgba(255,183,77,0.2);">🍑 Défilement</a>
4. Boutons Graphiques (Images JPG/PNG) et Animations Dynamiques
Bouton Image de Fond - Style Texture Aquarelle (Une image JPG/PNG habille le fond du bouton)
🎨 Galerie Photo
<a href="#" style="display:inline-block;text-decoration:none;background-image:url('https://picsum.photos');background-size:cover;background-position:center;color:#ffffff;border:2px solid #ffffff;padding:14px 40px;border-radius:12px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;box-shadow:0 6px 20px rgba(0,0,0,0.4);text-shadow:0 2px 4px rgba(0,0,0,0.8);">🎨 Galerie Photo</a>
Bouton Avatar Image Intégrée - Style Profil Rond (Une icône ou image PNG posée à gauche du texte)
<a href="#" style="display:inline-flex;align-items:center;gap:12px;text-decoration:none;background:#241331;color:#ff8dfb;border:2px solid #84599b;padding:10px 24px;border-radius:50px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(132,89,155,0.2);">
<img src="LIEN_DE_TON_IMAGE.png" style="width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #ff8dfb;">
Mon Espace Perso
</a>
Bouton Animé Pulsation Douce - Style Pêche Givrée (Grossit et rétrécit tout seul en boucle pour attirer l'œil)
💥 Offre Flash
<!-- Étape 1 : Met ce bloc style tout en haut de ton code HTML -->
<style>
@keyframes pulseGourmand {
0% { transform: scale(1); box-shadow: 0 4px 15px rgba(255,118,117,0.3); }
50% { transform: scale(1.06); box-shadow: 0 8px 25px rgba(255,118,117,0.6); }
100% { transform: scale(1); box-shadow: 0 4px 15px rgba(255,118,117,0.3); }
}
.btn-pulse-anim { animation: pulseGourmand 2s infinite ease-in-out; }
</style>
<!-- Étape 2 : Colle le bouton où tu veux -->
<a href="#" class="btn-pulse-anim" style="display:inline-block;text-decoration:none;background:linear-gradient(135deg,#ff94c2,#ff7675);color:#ffffff;border:2px solid #ffffff;padding:12px 35px;border-radius:30px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;">💥 Offre Flash</a>
Bouton Animé Lueur Flash - Style Émeraude Clignotant (Passe d'une ombre discrète à un éclat néon toutes les secondes)
🟢 Serveur En Ligne
<!-- Étape 1 : Style CSS -->
<style>
@keyframes neonFlash {
0% { border-color: #0ca678; box-shadow: 0 0 5px rgba(12,166,120,0.2); }
50% { border-color: #22c55e; box-shadow: 0 0 20px rgba(34,197,94,0.8); }
100% { border-color: #0ca678; box-shadow: 0 0 5px rgba(12,166,120,0.2); }
}
.btn-neon-flash { animation: neonFlash 1.5s infinite ease-in-out; }
</style>
<!-- Étape 2 : Le Bouton -->
<a href="#" class="btn-neon-flash" style="display:inline-block;text-decoration:none;background:#11061a;color:#22c55e;border:2px solid #0ca678;padding:12px 30px;border-radius:8px;font-family:'Segoe UI',sans-serif;font-size:14px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;">🟢 Serveur En Ligne</a>
5. Formes Féeriques et Découpes Avancées (clip-path CSS)
Bouton Étoile Mystique à 5 Branches - Style Or Lunaire (Découpé à 100% en pur CSS)
✦VOTE
<a href="#" style="display:flex;align-items:center;justify-content:center;text-decoration:none;background:linear-gradient(135deg,#fef08a 0%,#f59e0b 100%);color:#78350f;width:110px;height:110px;clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);font-family:'Segoe UI',sans-serif;font-size:12px;font-weight:900;">✦<br>VOTE</a>
5. Formes Féeriques & Univers Cosmique (Arc-en-ciel, Soleil, Saturne)
Bouton Arc-en-ciel - Dégradé Multicolore Évanescent & Forme Capsule Arrondie
🌈 Palette Arc-en-ciel
<a href="#" style="display:inline-block;text-decoration:none;background:linear-gradient(45deg, #ff758c, #ff7eb3, #fccb90, #9be15d, #38f9d7, #4facfe);color:#ffffff;border:2px solid #ffffff;padding:12px 35px;border-radius:50px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;box-shadow:0 6px 20px rgba(255,126,179,0.4);">🌈 Palette Arc-en-ciel</a>
5. Formes Géométriques Spéciales en Dégradé Arc-en-ciel
Bouton Carré Parfait Arc-en-ciel (Forme bloc 100% symétrique sans aucun arrondi)
CARRÉ
<a href="#" style="display:flex;align-items:center;justify-content:center;text-decoration:none;background:linear-gradient(45deg,#ff758c,#ff7eb3,#fccb90,#9be15d,#38f9d7,#4facfe);color:#ffffff;width:90px;height:90px;border-radius:0px;border:2px solid #ffffff;font-family:'Segoe UI',sans-serif;font-size:14px;font-weight:900;box-shadow:0 6px 20px rgba(0,0,0,0.3);box-sizing:border-box;">CARRÉ</a>
Bouton Losange Arc-en-ciel (Forme taillée en diamant grâce à une rotation de 45 degrés du conteneur)
<div style="padding:20px 0;">
<a href="#" style="display:flex;align-items:center;justify-content:center;text-decoration:none;background:linear-gradient(45deg,#ff758c,#ff7eb3,#fccb90,#9be15d,#38f9d7,#4facfe);color:#ffffff;width:75px;height:75px;transform:rotate(45deg);border:2px solid #ffffff;box-shadow:4px 4px 15px rgba(0,0,0,0.3);box-sizing:border-box;">
<span style="display:block;transform:rotate(-45deg);font-family:'Segoe UI',sans-serif;font-size:11px;font-weight:900;">💎 GET</a>
</div>
Bouton Grand Badge Horizontal Arc-en-ciel (Coins très légèrement adoucis pour un look bandeau pro)
✨ REJOINDRE NOTRE COMMUNAUTÉ ✨
<a href="#" style="display:inline-block;text-decoration:none;background:linear-gradient(45deg,#ff758c,#ff7eb3,#fccb90,#9be15d,#38f9d7,#4facfe);color:#ffffff;border:2px solid #ffffff;padding:14px 70px;border-radius:6px;font-family:'Segoe UI',sans-serif;font-size:16px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;box-shadow:0 6px 20px rgba(0,0,0,0.3);">✨ REJOINDRE NOTRE COMMUNAUTÉ ✨</a>