# Créer des interactions de bouton 3D - Spline 101 | Créez votre première scène interactive - 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. [Cours](https://spline.design/fr/academy/collections)
3. [Spline 101 | Créez votre première scène interactive](https://spline.design/fr/academy/collections/spline-101-build-your-first-interactive-scene)
4. Créer des interactions de bouton 3D

# Créer des interactions de bouton 3D

Leçon 5 sur 16Spline 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

## À suivre

[Ajouter des animations Look At aux objets 3D10 minDébutant](https://spline.design/fr/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Continuer](https://spline.design/fr/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-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.