# Créer des interactions de bouton 3D - Spline Academy (https://spline.design/fr/academy/tutorials/how-to-create-3d-button-interactions)

> Dans ce tutoriel, nous montrons comment créer un bouton 3D simple et lui ajouter des fonctionnalités interactives de base, comme des changements de taille,…

1. [Academy](https://spline.design/fr/academy)
2. [Tutoriels](https://spline.design/fr/academy/tutorials)
3. Créer des interactions de bouton 3D

# Créer des interactions de bouton 3D

Spline 3DDébutant10 min

Dans ce tutoriel, nous montrons comment créer un bouton 3D simple et lui ajouter des fonctionnalités interactives de base, comme des changements de taille, de couleur et de position, grâce aux événements de souris.

🏡 Ensuite, nous vous montrons comment créer un bouton qui pivote pour révéler une scène, et comment associer votre bouton à l’ouverture d’une URL.

Ce tutoriel est idéal pour les débutants qui s’intéressent au design 3D interactif !

Dites-nous en commentaire s’il y a autre chose que vous aimeriez apprendre !

Partagez votre version de votre propre bouton 3D sur notre communauté ! 💖

🔮 Communauté Spline → <https://community.spline.design>

## Ce que vous allez apprendre

1. [0:00Intro](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Concevoir un bouton 3D](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Changer la taille - événement Mouse Hover](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Effet de changement de couleur](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Bascule - événement Mouse Down](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Bouton qui révèle une scène 3D interactive](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Ouvrir des URL - action Open Link](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Ressources associées

- [House ButtonModèle](https://app.spline.design/academy/tutorials/how-to-create-3d-button-interactions?redirect-duplicate-template-uuid=eaa257e7-bf12-4666-8fe0-26bc66f59075&is-2d-file=false)
- [Extruding 2D objects in 3DDocument](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [How state-based animation worksDocument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Key Down EventDocument](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionDocument](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Présentation

- Spline 3D
- 10 min
- Débutant

## Fait partie de

- [Spline 101 | Créez votre première scène interactive](https://spline.design/fr/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Tutoriels associés

[Tous les tutoriels](https://spline.design/fr/academy/tutorials)

[Créer un orbe 3D réactif avec du mouvement et de l’interactionSpline 3DIntermédiaire7 min](https://spline.design/fr/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Créer des visualisations de données 3D dans Spline avec des variables et des API en temps réelSpline 3DAvancé15 min](https://spline.design/fr/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Ajouter des interactions à la souris aux objets 3DSpline 3DDébutant14 min](https://spline.design/fr/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

[Spline](https://spline.design/fr)

L’éditeur 3D et 2D pour les équipes et leurs agents. Publiez sur le web, iOS et Android.

#### Interrogez l’IA sur Spline

#### Produits

- [Design 3D](https://spline.design/fr/3d-design)
- [Hana](https://spline.design/fr/hana)
- [Omma](https://omma.build)
- [Génération 3D par IA](https://spline.design/fr/ai-generate)
- [Spline MCP](https://spline.design/fr/mcp)
- [Spline Arena](https://spline.design/fr/arena)
- [Tarifs](https://spline.design/fr/pricing)
- [Enterprise](https://spline.design/fr/enterprise)

#### Runtimes

- [Web](https://spline.design/fr/web)
- [iOS](https://spline.design/fr/ios)
- [Android](https://spline.design/fr/android)

#### Apps

- [Télécharger](https://spline.design/fr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Télécharger Spline Mirror](https://spline.design/download-mirror)

#### Apprendre

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/fr/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Communauté

- [Communauté Spline](https://community.spline.design)
- [Blog](https://spline.design/fr/blog)
- [Nouveautés](https://spline.design/fr/changelog)
- [Éducation](https://spline.design/fr/education)
- [Contra](https://spline.design/contra)
- [Affiliation](https://spline.design/fr/affiliate)

#### Entreprise

- [Clients](https://spline.design/fr/customers)
- [Carrières](https://www.ycombinator.com/companies/spline/jobs)
- [Sécurité](https://spline.design/fr/security)

#### Mentions légales

- [Conditions générales](https://spline.design/terms)
- [Confidentialité](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.