# Como criar interações com botões 3D - Spline 101 | Crie sua primeira cena interativa - Spline Academy (https://spline.design/pt-br/academy/tutorials/how-to-create-3d-button-interactions)

> Neste tutorial, mostramos como criar um botão 3D simples e adicionar recursos interativos básicos, como ajustes de tamanho, mudanças de cor e alternância de…

1. [Academy](https://spline.design/pt-br/academy)
2. [Cursos](https://spline.design/pt-br/academy/collections)
3. [Spline 101 | Crie sua primeira cena interativa](https://spline.design/pt-br/academy/collections/spline-101-build-your-first-interactive-scene)
4. Como criar interações com botões 3D

# Como criar interações com botões 3D

Aula 5 de 16Spline 3DIniciante10 min

Neste tutorial, mostramos como criar um botão 3D simples e adicionar recursos interativos básicos, como ajustes de tamanho, mudanças de cor e alternância de posição com eventos de mouse.

🏡 Em seguida, mostramos como criar um botão que gira e revela uma cena, e como ligar seu botão para abrir uma URL.

Este tutorial é perfeito para iniciantes interessados em design 3D interativo!

Conte nos comentários se tiver mais alguma coisa que você gostaria de aprender!

Compartilhe sua versão do seu próprio botão 3D na nossa comunidade! 💖

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

## O que você vai aprender

1. [0:00Introdução](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Criando um botão 3D](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Mudar o tamanho - evento Mouse Hover](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Efeito de mudança de cor](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Alternância - evento Mouse Down](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Botão que revela uma cena 3D interativa](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Abrindo URLs - ação Open Link](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Recursos relacionados

- [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 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)

## Visão geral

- Spline 3D
- 10 min
- Iniciante

## A seguir

[Adicione animações Look At a objetos 3D10 minIniciante](https://spline.design/pt-br/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Continuar](https://spline.design/pt-br/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)

[Spline](https://spline.design/pt-br)

O editor 3D e 2D para equipes e seus agentes. Publique na web, no iOS e no Android.

#### Pergunte à IA sobre o Spline

#### Produtos

- [Design 3D](https://spline.design/pt-br/3d-design)
- [Hana](https://spline.design/pt-br/hana)
- [Omma](https://omma.build)
- [Geração 3D com IA](https://spline.design/pt-br/ai-generate)
- [Spline MCP](https://spline.design/pt-br/mcp)
- [Spline Arena](https://spline.design/pt-br/arena)
- [Preços](https://spline.design/pt-br/pricing)
- [Empresas](https://spline.design/pt-br/enterprise)

#### Runtimes

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

#### Apps

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

#### Aprenda

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/pt-br/academy)
- [API do Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Soluções](https://spline.design/solutions)

#### Comunidade

- [Comunidade do Spline](https://community.spline.design)
- [Blog](https://spline.design/pt-br/blog)
- [Novidades](https://spline.design/pt-br/changelog)
- [Educação](https://spline.design/pt-br/education)
- [Contra](https://spline.design/contra)
- [Afiliados](https://spline.design/pt-br/affiliate)

#### Empresa

- [Clientes](https://spline.design/pt-br/customers)
- [Carreiras](https://www.ycombinator.com/companies/spline/jobs)
- [Segurança](https://spline.design/pt-br/security)

#### Jurídico

- [Termos e condições](https://spline.design/terms)
- [Privacidade](https://spline.design/privacy)

#### Contato

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

© 2026 - Spline, Inc.