# 3D-Button-Interaktionen erstellen - Spline 101 | Deine erste interaktive Szene bauen - 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. [Kurse](https://spline.design/de/academy/collections)
3. [Spline 101 | Deine erste interaktive Szene bauen](https://spline.design/de/academy/collections/spline-101-build-your-first-interactive-scene)
4. 3D-Button-Interaktionen erstellen

# 3D-Button-Interaktionen erstellen

Lektion 5 von 16Spline 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

## Als Nächstes

[Look-At-Animationen für 3D-Objekte10 Min.Einsteiger](https://spline.design/de/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Weiter](https://spline.design/de/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-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.