# How to Create 3D Button Interactions (https://academy.spline.design/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

> A video tutorial from the Spline Academy.

- Product: Spline 3D
- Level: beginner
- Duration: 10 min 13 s
- Published: 2024-08-06
- Video: https://www.youtube.com/watch?v=B8o5O7PyKjY
- Part of: [Spline 101 | Build Your First Interactive Scene](https://academy.spline.design/collections/spline-101-build-your-first-interactive-scene.md)

## About this tutorial

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

## Chapters

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

## Related documentation

- [Extruding 2D objects in 3D](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [How state-based animation works](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Key Down Event](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition Action](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)