# Cara Membuat Interaksi Tombol 3D - Spline 101 | Membuat Scene Interaktif Pertama Anda - 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. [Kursus](https://spline.design/id/academy/collections)
3. [Spline 101 | Membuat Scene Interaktif Pertama Anda](https://spline.design/id/academy/collections/spline-101-build-your-first-interactive-scene)
4. Cara Membuat Interaksi Tombol 3D

# Cara Membuat Interaksi Tombol 3D

Pelajaran 5 dari 16Spline 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

## Berikutnya

[Menambahkan Animasi Look At ke Objek 3D10 mntPemula](https://spline.design/id/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Lanjutkan](https://spline.design/id/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-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.