# Så skapar du 3D-knappinteraktioner - Spline 101 | Bygg din första interaktiva scen - Spline Academy (https://spline.design/sv/academy/tutorials/how-to-create-3d-button-interactions)

> I den här tutorialen visar vi hur du skapar en enkel 3D-knapp och lägger till grundläggande interaktiva funktioner som storleksändring, färgbyte och växling…

1. [Academy](https://spline.design/sv/academy)
2. [Kurser](https://spline.design/sv/academy/collections)
3. [Spline 101 | Bygg din första interaktiva scen](https://spline.design/sv/academy/collections/spline-101-build-your-first-interactive-scene)
4. Så skapar du 3D-knappinteraktioner

# Så skapar du 3D-knappinteraktioner

Lektion 5 av 16Spline 3DNybörjare10 min

I den här tutorialen visar vi hur du skapar en enkel 3D-knapp och lägger till grundläggande interaktiva funktioner som storleksändring, färgbyte och växling av position med mushändelser.

🏡 Sedan visar vi hur du skapar en knapp som roterar och avslöjar en scen, och hur du kopplar knappen så att den öppnar en URL.

Den här tutorialen är perfekt för nybörjare som är intresserade av interaktiv 3D-design!

Berätta i kommentarerna om det är något annat du vill lära dig!

Dela din version av din egen 3D-knapp i vår community! 💖

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

## Det här lär du dig

1. [0:00Intro](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Designa en 3D-knapp](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Ändra storlek – händelsen Mouse Hover](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Effekt med färgbyte](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Växla – händelsen Mouse Down](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Knapp som avslöjar en interaktiv 3D-scen](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Länka till URL:er – åtgärden Open Link](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Relaterade resurser

- [House ButtonMall](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)

## Översikt

- Spline 3D
- 10 min
- Nybörjare

## Nästa

[Lägg till Look At-animationer på 3D-objekt10 minNybörjare](https://spline.design/sv/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Fortsätt](https://spline.design/sv/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)

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

3D- och 2D-editorn för team och deras agenter. Publicera på webben, iOS och Android.

#### Fråga AI om Spline

#### Produkter

- [3D-design](https://spline.design/sv/3d-design)
- [Hana](https://spline.design/sv/hana)
- [Omma](https://omma.build)
- [3D-generering med AI](https://spline.design/sv/ai-generate)
- [Spline MCP](https://spline.design/sv/mcp)
- [Spline Arena](https://spline.design/sv/arena)
- [Priser](https://spline.design/sv/pricing)
- [Företag](https://spline.design/sv/enterprise)

#### Runtimes

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

#### Appar

- [Ladda ner](https://spline.design/sv/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Ladda ner Spline Mirror](https://spline.design/download-mirror)

#### Lär dig

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/sv/blog)
- [Ändringslogg](https://spline.design/sv/changelog)
- [Utbildning](https://spline.design/sv/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/sv/affiliate)

#### Företaget

- [Kunder](https://spline.design/sv/customers)
- [Karriär](https://www.ycombinator.com/companies/spline/jobs)
- [Säkerhet](https://spline.design/sv/security)

#### Juridik

- [Villkor](https://spline.design/terms)
- [Integritet](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.