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

> Dalam tutorial ini, kami menunjukkan cara membuat tombol 3D sederhana dan menambahkan fitur interaktif dasar seperti penyesuaian ukuran, perubahan warna,…

1. [Academy](https://spline.design/id/academy)
2. [Tutorial](https://spline.design/id/academy/tutorials)
3. Cara Membuat Interaksi Tombol 3D

# Cara Membuat Interaksi Tombol 3D

Spline 3DPemula10 mnt

Dalam tutorial ini, kami menunjukkan cara membuat tombol 3D sederhana dan menambahkan fitur interaktif dasar seperti penyesuaian ukuran, perubahan warna, dan toggle posisi melalui mouse event.

🏡 Selanjutnya, kami akan menunjukkan cara membuat tombol yang berputar dan memunculkan sebuah scene, serta cara menautkan tombol Anda untuk membuka URL.

Tutorial ini sangat cocok untuk pemula yang tertarik dengan desain 3D interaktif!

Beri tahu kami di kolom komentar jika ada hal lain yang ingin Anda pelajari!

Bagikan versi tombol 3D buatan Anda di komunitas kami! 💖

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

## Yang akan Anda pelajari

1. [0:00Intro](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Mendesain tombol 3D](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Mengubah ukuran - event Mouse Hover](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Efek perubahan warna](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Toggle - event Mouse Down](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Tombol yang memunculkan scene 3D interaktif](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Menautkan ke URL - action Open Link](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Sumber terkait

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

## Ikhtisar

- Spline 3D
- 10 mnt
- Pemula

## Bagian dari

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

## Tutorial terkait

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

[Cara Membuat Bola 3D Reaktif dengan Gerakan dan InteraksiSpline 3DMenengah7 mnt](https://spline.design/id/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Cara Membuat Visualisasi Data 3D di Spline dengan Variabel dan API Real-TimeSpline 3DLanjutan15 mnt](https://spline.design/id/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Menambahkan Interaksi Berbasis Mouse ke Objek 3DSpline 3DPemula14 mnt](https://spline.design/id/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

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

Editor 3D dan 2D untuk tim dan agen mereka. Rilis ke web, iOS, dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Desain 3D](https://spline.design/id/3d-design)
- [Hana](https://spline.design/id/hana)
- [Omma](https://omma.build)
- [Pembuatan 3D dengan AI](https://spline.design/id/ai-generate)
- [Spline MCP](https://spline.design/id/mcp)
- [Spline Arena](https://spline.design/id/arena)
- [Harga](https://spline.design/id/pricing)
- [Enterprise](https://spline.design/id/enterprise)

#### Runtime

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

#### Aplikasi

- [Unduh](https://spline.design/id/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Unduh Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komunitas

- [Komunitas Spline](https://community.spline.design)
- [Blog](https://spline.design/id/blog)
- [Changelog](https://spline.design/id/changelog)
- [Pendidikan](https://spline.design/id/education)
- [Contra](https://spline.design/contra)
- [Afiliasi](https://spline.design/id/affiliate)

#### Perusahaan

- [Pelanggan](https://spline.design/id/customers)
- [Karier](https://www.ycombinator.com/companies/spline/jobs)
- [Keamanan](https://spline.design/id/security)

#### Legal

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

#### Kontak

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

© 2026 - Spline, Inc.