# Cách tạo tương tác cho nút bấm 3D - Spline Academy (https://spline.design/vi/academy/tutorials/how-to-create-3d-button-interactions)

> Trong hướng dẫn này, chúng tôi minh họa cách tạo một nút bấm 3D đơn giản và thêm các tính năng tương tác cơ bản như thay đổi kích thước, đổi màu và bật/tắt…

1. [Academy](https://spline.design/vi/academy)
2. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. Cách tạo tương tác cho nút bấm 3D

# Cách tạo tương tác cho nút bấm 3D

Spline 3DCơ bản10 phút

Trong hướng dẫn này, chúng tôi minh họa cách tạo một nút bấm 3D đơn giản và thêm các tính năng tương tác cơ bản như thay đổi kích thước, đổi màu và bật/tắt vị trí bằng sự kiện chuột.

🏡 Tiếp theo, chúng tôi sẽ chỉ cho bạn cách tạo một nút bấm xoay và hé lộ một cảnh, cũng như cách liên kết nút bấm để mở một URL.

Hướng dẫn này rất phù hợp cho người mới bắt đầu quan tâm đến thiết kế 3D tương tác!

Hãy cho chúng tôi biết trong phần bình luận nếu bạn muốn học thêm điều gì!

Hãy chia sẻ phiên bản nút bấm 3D của riêng bạn trong cộng đồng của chúng tôi! 💖

🔮 Cộng đồng Spline → <https://community.spline.design>

## Bạn sẽ học được gì

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Thiết kế nút bấm 3D](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Thay đổi kích thước - sự kiện Mouse Hover](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Hiệu ứng đổi màu](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Bật/tắt - sự kiện Mouse Down](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Nút bấm hé lộ cảnh 3D tương tác](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Liên kết đến URL - hành động Open Link](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Tài nguyên liên quan

- [House ButtonMẫu](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 3DTài liệu](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [How state-based animation worksTài liệu](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Key Down EventTài liệu](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionTài liệu](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Tổng quan

- Spline 3D
- 10 phút
- Cơ bản

## Thuộc

- [Spline 101 | Xây dựng cảnh tương tác đầu tiên của bạn](https://spline.design/vi/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Hướng dẫn liên quan

[Tất cả hướng dẫn](https://spline.design/vi/academy/tutorials)

[Cách xây dựng quả cầu 3D phản hồi với chuyển động và tương tácSpline 3DTrung cấp7 phút](https://spline.design/vi/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Cách tạo trực quan hóa dữ liệu 3D trong Spline bằng biến và API thời gian thựcSpline 3DNâng cao15 phút](https://spline.design/vi/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Thêm tương tác bằng chuột cho đối tượng 3DSpline 3DCơ bản14 phút](https://spline.design/vi/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

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

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

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

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

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

© 2026 - Spline, Inc.