# How to Create 3D Button Interactions - Spline 101 | Build Your First Interactive Scene - Spline Academy (https://spline.design/academy/tutorials/how-to-create-3d-button-interactions)

> In this tutorial, we demonstrate how to create a simple 3D button and add basic interactive features such as size adjustments, color changes, and position…

1. [Academy](https://spline.design/academy)
2. [Courses](https://spline.design/academy/collections)
3. [Spline 101 | Build Your First Interactive Scene](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene)
4. How to Create 3D Button Interactions

# How to Create 3D Button Interactions

Lesson 5 of 16Spline 3DBeginner10 min

In this tutorial, we demonstrate how to create a simple 3D button and add basic interactive features such as size adjustments, color changes, and position toggles through mouse events.

🏡 Next, we will show you how to create a button that rotates and reveals a scene, and how to link your button to open a URL.

This tutorial is perfect for beginners interested in interactive 3D design!

Let us know in the comments if there's anything else you'd like to learn!

Share your version of your own 3D button in our community! 💖

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

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Designing a 3D Button](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Change Size - Mouse Hover Event](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Color Change Effect](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Toggle - Mouse Down Event](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Button with interactive 3D scene reveal](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Linking to URLs - Open Link Action](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Related resources

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

## Overview

- Spline 3D
- 10 min
- Beginner

## Up next

[Add Look At Animations to 3D Objects10 minBeginner](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Continue](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)

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

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

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

#### Apps

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

#### Learn

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/blog)
- [Changelog](https://spline.design/changelog)
- [Education](https://spline.design/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/affiliate)

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.