# Como criar interações com botões 3D - 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. [Tutoriais](https://spline.design/pt-br/academy/tutorials)
3. Como criar interações com botões 3D

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

Spline 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

## Parte de

- [Spline 101 | Crie sua primeira cena interativa](https://spline.design/pt-br/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Tutoriais relacionados

[Todos os tutoriais](https://spline.design/pt-br/academy/tutorials)

[Como criar uma esfera 3D reativa com movimento e interaçãoSpline 3DIntermediário7 min](https://spline.design/pt-br/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Como criar visualizações de dados 3D no Spline com variáveis e APIs em tempo realSpline 3DAvançado15 min](https://spline.design/pt-br/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Adicione interações com o mouse a objetos 3DSpline 3DIniciante14 min](https://spline.design/pt-br/academy/tutorials/add-mouse-based-interactions-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.