# Cara Mencipta Interaksi Butang 3D - Spline Academy (https://spline.design/ms/academy/tutorials/how-to-create-3d-button-interactions)

> Dalam tutorial ini, kami menunjukkan cara mencipta butang 3D ringkas dan menambah ciri interaktif asas seperti pelarasan saiz, pertukaran warna dan togol…

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Cara Mencipta Interaksi Butang 3D

# Cara Mencipta Interaksi Butang 3D

Spline 3DPemula10 min

Dalam tutorial ini, kami menunjukkan cara mencipta butang 3D ringkas dan menambah ciri interaktif asas seperti pelarasan saiz, pertukaran warna dan togol kedudukan melalui peristiwa tetikus.

🏡 Seterusnya, kami akan menunjukkan cara mencipta butang yang berputar dan mendedahkan sebuah adegan, dan cara memautkan butang anda untuk membuka URL.

Tutorial ini sesuai untuk pemula yang berminat dengan reka bentuk 3D interaktif!

Beritahu kami di ruangan komen jika ada perkara lain yang anda ingin pelajari!

Kongsi versi butang 3D anda sendiri dalam komuniti kami! 💖

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

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Mereka Bentuk Butang 3D](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Tukar Saiz - Peristiwa Mouse Hover](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Kesan Pertukaran Warna](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Togol - Peristiwa Mouse Down](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Butang dengan pendedahan adegan 3D interaktif](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Memaut ke URL - Tindakan Open Link](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Sumber berkaitan

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

## Gambaran keseluruhan

- Spline 3D
- 10 min
- Pemula

## Sebahagian daripada

- [Spline 101 | Bina Adegan Interaktif Pertama Anda](https://spline.design/ms/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Tutorial berkaitan

[Semua tutorial](https://spline.design/ms/academy/tutorials)

[Cara Membina Bola 3D Reaktif dengan Gerakan dan InteraksiSpline 3DPertengahan7 min](https://spline.design/ms/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Cara Mencipta Visualisasi Data 3D dalam Spline Menggunakan Pemboleh Ubah dan API Masa NyataSpline 3DLanjutan15 min](https://spline.design/ms/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Tambah Interaksi Berasaskan Tetikus pada Objek 3DSpline 3DPemula14 min](https://spline.design/ms/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

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

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

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

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

- [Terma & Syarat](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Hubungi

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

© 2026 - Spline, Inc.