# 3D düğme etkileşimleri nasıl oluşturulur - Spline Academy (https://spline.design/tr/academy/tutorials/how-to-create-3d-button-interactions)

> Bu eğitimde basit bir 3D düğme oluşturmayı ve fare olaylarıyla boyut ayarı, renk değişimi ve konum geçişi gibi temel etkileşimli özellikler eklemeyi…

1. [Academy](https://spline.design/tr/academy)
2. [Eğitimler](https://spline.design/tr/academy/tutorials)
3. 3D düğme etkileşimleri nasıl oluşturulur

# 3D düğme etkileşimleri nasıl oluşturulur

Spline 3DBaşlangıç10 dk

Bu eğitimde basit bir 3D düğme oluşturmayı ve fare olaylarıyla boyut ayarı, renk değişimi ve konum geçişi gibi temel etkileşimli özellikler eklemeyi gösteriyoruz.

🏡 Ardından dönerek bir sahneyi ortaya çıkaran bir düğme oluşturmayı ve düğmeni bir URL açacak şekilde bağlamayı göstereceğiz.

Bu eğitim, etkileşimli 3D tasarıma ilgi duyan yeni başlayanlar için birebir!

Öğrenmek istediğin başka bir şey varsa yorumlarda bize söyle!

Kendi 3D düğme versiyonunu topluluğumuzda paylaş! 💖

🔮 Spline Topluluğu → <https://community.spline.design>

## Neler öğreneceksin

1. [0:00Giriş](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:153D bir düğme tasarlamak](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Boyut değiştirmek - Mouse Hover olayı](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Renk değiştirme efekti](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Aç/kapat - Mouse Down olayı](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Etkileşimli 3D sahneyi ortaya çıkaran düğme](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41URL’lere bağlantı vermek - Open Link aksiyonu](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## İlgili kaynaklar

- [House ButtonŞablon](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 3DDoküman](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [How state-based animation worksDoküman](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Key Down EventDoküman](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionDoküman](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Genel bakış

- Spline 3D
- 10 dk
- Başlangıç

## Ait olduğu kurs:

- [Spline 101 | İlk etkileşimli sahneni oluştur](https://spline.design/tr/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## İlgili eğitimler

[Tüm eğitimler](https://spline.design/tr/academy/tutorials)

[Hareket ve etkileşimle tepki veren bir 3D küre nasıl oluşturulurSpline 3DOrta7 dk](https://spline.design/tr/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Spline’da değişkenler ve gerçek zamanlı API’lerle 3D veri görselleştirmeleri nasıl oluşturulurSpline 3Dİleri15 dk](https://spline.design/tr/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[3D nesnelere fare tabanlı etkileşimler ekleSpline 3DBaşlangıç14 dk](https://spline.design/tr/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

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

Ekipler ve ajanları için 3D ve 2D editör. Web’de, iOS’ta ve Android’de yayınla.

#### Spline’ı yapay zekaya sor

#### Ürünler

- [3D Tasarım](https://spline.design/tr/3d-design)
- [Hana](https://spline.design/tr/hana)
- [Omma](https://omma.build)
- [Yapay Zekayla 3D Üretim](https://spline.design/tr/ai-generate)
- [Spline MCP](https://spline.design/tr/mcp)
- [Spline Arena](https://spline.design/tr/arena)
- [Fiyatlandırma](https://spline.design/tr/pricing)
- [Kurumsal](https://spline.design/tr/enterprise)

#### Runtime’lar

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

#### Uygulamalar

- [İndir](https://spline.design/tr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror’ı indir](https://spline.design/download-mirror)

#### Öğren

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/tr/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Çözümler](https://spline.design/solutions)

#### Topluluk

- [Spline Topluluğu](https://community.spline.design)
- [Blog](https://spline.design/tr/blog)
- [Sürüm Notları](https://spline.design/tr/changelog)
- [Eğitim](https://spline.design/tr/education)
- [Contra](https://spline.design/contra)
- [Ortaklık](https://spline.design/tr/affiliate)

#### Şirket

- [Müşteriler](https://spline.design/tr/customers)
- [Kariyer](https://www.ycombinator.com/companies/spline/jobs)
- [Güvenlik](https://spline.design/tr/security)

#### Yasal

- [Şartlar ve Koşullar](https://spline.design/terms)
- [Gizlilik](https://spline.design/privacy)

#### İletişim

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

© 2026 - Spline, Inc.