# Cómo crear interacciones de botones 3D - 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. [Tutoriales](https://spline.design/es/academy/tutorials)
3. Cómo crear interacciones de botones 3D

# Cómo crear interacciones de botones 3D

Spline 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

## Parte de

- [Spline 101 | Crea tu primera escena interactiva](https://spline.design/es/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Tutoriales relacionados

[Todos los tutoriales](https://spline.design/es/academy/tutorials)

[Cómo crear un orbe 3D reactivo con movimiento e interacciónSpline 3DIntermedio7 min](https://spline.design/es/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Cómo crear visualizaciones de datos 3D en Spline con variables y API en tiempo realSpline 3DAvanzado15 min](https://spline.design/es/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Añade interacciones con el ratón a objetos 3DSpline 3DPrincipiante14 min](https://spline.design/es/academy/tutorials/add-mouse-based-interactions-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.