# Designing a 3D toggle button micro-interaction with Spline (https://academy.spline.design/tutorials/designing-a-3d-toggle-button-micro-interaction-with-spline)

> A video tutorial from the Spline Academy.

- Product: Spline 3D
- Level: beginner
- Duration: 13 min 35 s
- Published: 2022-04-21
- Video: https://www.youtube.com/watch?v=zkw5GT9nYS8

## About this tutorial

In this tutorial, you will learn how to use the events and states system to create micro-interactions and build a toggle button in 3D.

☀️ Update: Spline is improving fast, and now there is a new way to achieve the toggle effect without using invisible objects.

Check this tutorial for more: https://www.youtube.com/watch?v=lJIDSiDlhvw&t=10s&ab_channel=Spline

☀️Update 2: The new Components can be used to create variations of your 3D UI elements.

Tutorial about components here: https://youtu.be/VSddFnDjPUA

## Chapters

- [0:00](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=0s) Introduction
- [0:20](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=20s) Making the toggle shapes
- [1:40](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=100s) Creating materials
- [5:45](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=345s) Creating the event triggers
- [8:47](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=527s) Creating the states
- [11:30](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=690s) Adding micro details
- [12:20](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=740s) Final export options