# 3D-Button-Interaktionen erstellen - Spline Academy (https://spline.design/de/academy/tutorials/how-to-create-3d-button-interactions)

> In diesem Tutorial zeigen wir, wie du einen einfachen 3D-Button erstellst und per Maus-Events grundlegende interaktive Funktionen wie Größenänderungen,…

1. [Academy](https://spline.design/de/academy)
2. [Tutorials](https://spline.design/de/academy/tutorials)
3. 3D-Button-Interaktionen erstellen

# 3D-Button-Interaktionen erstellen

Spline 3DEinsteiger10 Min.

In diesem Tutorial zeigen wir, wie du einen einfachen 3D-Button erstellst und per Maus-Events grundlegende interaktive Funktionen wie Größenänderungen, Farbwechsel und Positionswechsel hinzufügst.

🏡 Danach zeigen wir dir, wie du einen Button erstellst, der sich dreht und eine Szene enthüllt, und wie du deinen Button mit einer URL verknüpfst.

Dieses Tutorial ist perfekt für Einsteiger, die sich für interaktives 3D-Design interessieren!

Sag uns in den Kommentaren, was du sonst noch lernen möchtest!

Teile deine Version deines eigenen 3D-Buttons in unserer Community! 💖

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

## Das lernst du

1. [0:00Intro](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Einen 3D-Button designen](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Größe ändern – Mouse-Hover-Event](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Farbwechsel-Effekt](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Umschalten – Mouse-Down-Event](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Button, der eine interaktive 3D-Szene enthüllt](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Auf URLs verlinken – Open-Link-Action](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Weitere Ressourcen

- [House ButtonVorlage](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 3DDokument](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [How state-based animation worksDokument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Key Down EventDokument](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionDokument](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Überblick

- Spline 3D
- 10 Min.
- Einsteiger

## Teil von

- [Spline 101 | Deine erste interaktive Szene bauen](https://spline.design/de/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Ähnliche Tutorials

[Alle Tutorials](https://spline.design/de/academy/tutorials)

[Einen reaktiven 3D-Orb mit Bewegung und Interaktion bauenSpline 3DFortgeschritten7 Min.](https://spline.design/de/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[3D-Datenvisualisierungen in Spline mit Variablen und Echtzeit-APIs erstellenSpline 3DProfi15 Min.](https://spline.design/de/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Mausbasierte Interaktionen für 3D-ObjekteSpline 3DEinsteiger14 Min.](https://spline.design/de/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

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

Der 3D- und 2D-Editor für Teams und ihre Agenten. Veröffentliche im Web, auf iOS und Android.

#### Frag die KI zu Spline

#### Produkte

- [3D-Design](https://spline.design/de/3d-design)
- [Hana](https://spline.design/de/hana)
- [Omma](https://omma.build)
- [KI-3D-Generierung](https://spline.design/de/ai-generate)
- [Spline MCP](https://spline.design/de/mcp)
- [Spline Arena](https://spline.design/de/arena)
- [Preise](https://spline.design/de/pricing)
- [Enterprise](https://spline.design/de/enterprise)

#### Runtimes

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

#### Apps

- [Download](https://spline.design/de/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror herunterladen](https://spline.design/download-mirror)

#### Lernen

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/de/blog)
- [Changelog](https://spline.design/de/changelog)
- [Bildung](https://spline.design/de/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/de/affiliate)

#### Unternehmen

- [Kunden](https://spline.design/de/customers)
- [Karriere](https://www.ycombinator.com/companies/spline/jobs)
- [Sicherheit](https://spline.design/de/security)

#### Rechtliches

- [AGB](https://spline.design/terms)
- [Datenschutz](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.