# Så skapar du 3D-knappinteraktioner - 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. [Tutorials](https://spline.design/sv/academy/tutorials)
3. Så skapar du 3D-knappinteraktioner

# Så skapar du 3D-knappinteraktioner

Spline 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

## Del av

- [Spline 101 | Bygg din första interaktiva scen](https://spline.design/sv/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Relaterade tutorials

[Alla tutorials](https://spline.design/sv/academy/tutorials)

[Så bygger du en reaktiv 3D-sfär med rörelse och interaktionSpline 3DMedelnivå7 min](https://spline.design/sv/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Så skapar du 3D-datavisualiseringar i Spline med variabler och API:er i realtidSpline 3DAvancerad15 min](https://spline.design/sv/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Lägg till musbaserade interaktioner på 3D-objektSpline 3DNybörjare14 min](https://spline.design/sv/academy/tutorials/add-mouse-based-interactions-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.