# Cómo crear interacciones de botones 3D - Spline 101 | Crea tu primera escena interactiva - Spline Academy (https://spline.design/es/academy/tutorials/how-to-create-3d-button-interactions)

> En este tutorial te mostramos cómo crear un botón 3D sencillo y añadirle funciones interactivas básicas, como cambios de tamaño, de color y de posición,…

1. [Academy](https://spline.design/es/academy)
2. [Cursos](https://spline.design/es/academy/collections)
3. [Spline 101 | Crea tu primera escena interactiva](https://spline.design/es/academy/collections/spline-101-build-your-first-interactive-scene)
4. Cómo crear interacciones de botones 3D

# Cómo crear interacciones de botones 3D

Lección 5 de 16Spline 3DPrincipiante10 min

En este tutorial te mostramos cómo crear un botón 3D sencillo y añadirle funciones interactivas básicas, como cambios de tamaño, de color y de posición, mediante eventos de ratón.

🏡 A continuación, te enseñaremos a crear un botón que gira y revela una escena, y a vincular tu botón para que abra una URL.

¡Este tutorial es perfecto para principiantes interesados en el diseño 3D interactivo!

¡Cuéntanos en los comentarios si hay algo más que te gustaría aprender!

¡Comparte la versión de tu propio botón 3D en nuestra comunidad! 💖

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

## Lo que aprenderás

1. [0:00Introducción](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Diseñar un botón 3D](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Cambiar el tamaño: evento Mouse Hover](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Efecto de cambio de color](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Alternar: evento Mouse Down](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Botón que revela una escena 3D interactiva](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Enlazar a URL: acción Open Link](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Recursos relacionados

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

## Resumen

- Spline 3D
- 10 min
- Principiante

## A continuación

[Añade animaciones Look At a objetos 3D10 minPrincipiante](https://spline.design/es/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Continuar](https://spline.design/es/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)

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

El editor 3D y 2D para equipos y sus agentes. Publica en la web, iOS y Android.

#### Pregúntale a la IA sobre Spline

#### Productos

- [Diseño 3D](https://spline.design/es/3d-design)
- [Hana](https://spline.design/es/hana)
- [Omma](https://omma.build)
- [Generación 3D con IA](https://spline.design/es/ai-generate)
- [Spline MCP](https://spline.design/es/mcp)
- [Spline Arena](https://spline.design/es/arena)
- [Precios](https://spline.design/es/pricing)
- [Enterprise](https://spline.design/es/enterprise)

#### Runtimes

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

#### Apps

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

#### Aprende

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

#### Comunidad

- [Comunidad de Spline](https://community.spline.design)
- [Blog](https://spline.design/es/blog)
- [Novedades](https://spline.design/es/changelog)
- [Educación](https://spline.design/es/education)
- [Contra](https://spline.design/contra)
- [Afiliados](https://spline.design/es/affiliate)

#### Empresa

- [Clientes](https://spline.design/es/customers)
- [Empleo](https://www.ycombinator.com/companies/spline/jobs)
- [Seguridad](https://spline.design/es/security)

#### Legal

- [Términos y condiciones](https://spline.design/terms)
- [Privacidad](https://spline.design/privacy)

#### Contacto

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

© 2026 - Spline, Inc.