Test Système Boutons ArtMeNow v0.3

Test complet de tous les boutons définis dans button.css

Date: 14/03/2026 04:49 | Version: 0.3

🎨 Section 1: Boutons de Base (.amn-button)

Usage: Boutons standards du site sur fond clair. Styles fondamentaux partagés.
Variables utilisées: --primary-button-color, --amn-border-radius, --amn-min-touch-target

Bouton Primaire Standard

Classes: amn-button

✓ Base OK

Bouton avec classe générique

Classes: button

✓ Alias OK

Élément button simple

Élément: button (sans classe)

✓ Héritage OK

États Interactifs

Test: hover, active, focus, disabled

⚠ Testez hover/focus

        <!-- Usage Section 1 -->
        <button class="amn-button">Mon bouton</button>
        <button class="button">Alias .button</button>
        <button>HTML simple</button>
                

🎭 Section 2: Modificateurs de Style

Usage: Variations de couleurs à combiner avec .amn-button
Principe: Composition over inheritance - combinaison de classes

Bouton Secondaire

Classes: amn-button btn-secondary

✓ Style OK

Bouton Outline

Classes: amn-button btn-outline

✓ Ghost OK

Bouton Danger

Classes: amn-button btn-danger

✓ Danger OK

Bouton Success

Classes: amn-button btn-success

✓ Success OK

📐 Section 3: Modificateurs de Forme

Usage: Variations structurelles - tailles et formes spéciales
Responsive: Adaptation automatique mobile/desktop

Bouton Slider/Carrousel

Classes: btn-slider

✓ Circulaire OK

Bouton Compact

Classes: amn-button btn-compact

✓ Petit OK

Bouton Large

Classes: amn-button btn-large

✓ Grand OK

Bouton Icône + Texte

Classes: amn-button btn-icon

✓ Gap OK

Bouton Icône Seule

Classes: amn-button btn-icon-only

✓ Carré OK

Bouton Pleine Largeur

Classes: amn-button btn-block

✓ Full Width OK

⚡ Section 5: États Spéciaux & Animations

Usage: États dynamiques contrôlés par JavaScript
Animations: Spinner et pulse pour feedback utilisateur

Bouton Loading

Classes: amn-button btn-loading

✓ Spinner OK

Bouton Pulse

Classes: amn-button btn-pulse

⚠ Animation désactivée

🎨 Section 6: Boutons Spécialisés Galerie

Usage: Boutons spécifiques au système de galerie
Architecture: Apparence ici, positionnement dans gallery-system.css

Toggle Filters

Classes: btn-toggle-filters

✓ Galerie OK

Classes: btn-load-more

✓ Pagination OK

Filter Submit

Classes: btn-filter-submit

✓ Submit OK

Filter Reset

Classes: btn-filter-reset

✓ Reset OK

Close Sidebar

Classes: btn-close-sidebar

✓ Close OK

🎯 Section 7: Boutons Navigation Modal

Usage: Boutons de navigation du modal (sur fond sombre)
Positionnement: Géré dans modal-enhanced.css

Slider Button Gauche

Classes: artmenow-slider-button

✓ Nav OK

Slider Button Droite

Classes: artmenow-slider-button

✓ Nav OK

Slider Loading

Classes: artmenow-slider-button loading

✓ Loading OK

Slider Disabled

Classes: artmenow-slider-button (disabled)

✓ Disabled OK

🎯 Section 8: Boutons Contrôle Modal

Usage: Système unifié de contrôles modal (fermeture, etc.)
Style: Tous utilisent l apparence du bouton de fermeture

Container: .modal-controls-unified (transparent)
Boutons: .modal-control-btn (style fermeture unifié)

Container Unifié

Classes: modal-controls-unified + modal-control-btn

✓ Unified OK

Bouton Actif

Classes: modal-control-btn active

✓ Active OK

Bouton Disabled

Classes: modal-control-btn disabled

✓ Disabled OK

🎯 Section 10: Icônes CSS Pure

Usage: Icônes générées en CSS pur (sans dépendances externes)
Avantage: Pas de chargement de fonts, personnalisables avec currentColor

Base: .btn-icon-base + .btn-modal-style
Tailles: .btn-size-sm, .btn-size-md, .btn-size-lg

Icône X Fermeture

Classes: btn-icon-base btn-modal-style btn-size-md icon-close

✓ X CSS OK

Flèche Gauche

Classes: btn-icon-base btn-modal-style btn-size-md icon-arrow-left

✓ Arrow L OK

Flèche Droite

Classes: btn-icon-base btn-modal-style btn-size-md icon-arrow-right

✓ Arrow R OK

Tailles Variables

Tailles: btn-size-sm, btn-size-md, btn-size-lg

✓ Sizes OK

États Spéciaux

États: normal, loading, disabled

✓ States OK

📱 Test Responsive

Breakpoints: ≤649px (mobile), 650-921px (tablette), ≥922px (desktop)
Test: Redimensionnez votre navigateur pour voir les adaptations

Slider Responsive

Tailles: 40px/45px/55px selon écran

📱 Redimensionnez

Boutons Tactiles

min-height: var(--amn-min-touch-target)

✓ Touch OK

♿ Accessibilité & Performance

will-change: box-shadow pour optimisation GPU
prefers-reduced-motion: Support des préférences utilisateur

Test Focus

Outline visible au focus clavier

🎹 Testez Tab

Contraste

Ratio contraste ≥ 4.5:1

✓ WCAG OK