Bu butonu nasıl yapabilirim?

05.02.2014 01:52

JackkerL WM Aracı Kullanıcı

Üyelik 01.05.2013
Yaş/Cinsiyet 27 / E
Meslek Öğrenci
Konum İstanbul Avrupa

Ad Soyad O** A**
Mesajlar 1868
Beğeniler 219 / 526
Ticaret 16, (%100)

Merhaba,

css ile buton yapmaya çalışıyorum, resimde alt alta sıraladım, ilk kısım da normal hali, daha sonra üzerine gelince ve tıklayınca şeklinde butonlar bu şekilde.

Ben alt kısma border kodu ekleyip, tıklayınca kaybolmasını yapabiliyorum. Fakat şu ikonları ve o deseni nasıl yapacağım bilmiyorum:confused:

1 kişi bu mesajı beğendi.

05.02.2014 12:56

#2

Mintik WM Aracı Kullanıcı

Üyelik 27.01.2014
Yaş/Cinsiyet 40 / E
Meslek Desinatör
Konum İstanbul Avrupa

Ad Soyad A** U**
Mesajlar 256
Beğeniler 72 / 71
Ticaret 0, (%0)

İkonları Css ile yapmıyorsun. Tabisadece Css ilede yapabilirisn ama buda bence en üst seviye Css uzmanı olmalısın demek oluyor. Bu ikonlar 99% ihtimal Font Awesome kullanılarak eklenmiş. 3D görünümlü butonlara gelince orada da Css box-shadow kullanılmış.
Box shadow ile gölge vermek istediğin çerçevelere bildiğimiz photoshoptaki gibi bölge bulanıklık değeri ayarlayabiliyorsun. Eğer gölge bulanıklığı yani dağılma oranını 0px olarak ayarlarsan bu şekilde 3D olarak görünür. Şuradaki yazıda Css3 kullanılarak nasıl 3D tasarım hazırlanabileceğininlatımı var.

05.02.2014 14:36

#3

Onur89TR Üyeliği Durdurulmuş Banlı Kullanıcı

Üyelik 04.12.2011
Yaş/Cinsiyet 34 / E
Meslek .
Konum İzmir

Ad Soyad ** **
Mesajlar 2376
Beğeniler 704 / 791
Ticaret 1, (%100)

Aga ne kasıyorsun bir normal, bir de hover arkaplan yapacaksın. Padding ve border'i verip üzerine yazıyla yazacaksın. Oldu da bitti. :D

1 kişi bu mesajı beğendi.

05.02.2014 20:14

#4

JackkerL WM Aracı Kullanıcı

Üyelik 01.05.2013
Yaş/Cinsiyet 27 / E
Meslek Öğrenci
Konum İstanbul Avrupa

Ad Soyad O** A**
Mesajlar 1868
Beğeniler 219 / 526
Ticaret 16, (%100)

Onur89TR adlı üyeden alıntı

Aga ne kasıyorsun bir normal, bir de hover arkaplan yapacaksın. Padding ve border'i verip üzerine yazıyla yazacaksın. Oldu da bitti. :D

Bak çok mantıklı geldi ha:D

Ek Olarak: Style dosyalarını vs inceledim, butona arkaplan vererek daha da kolay yapılabiliyormuş.Zaten aynı butonun gölgelemesi olmadan yapmışım. Arkaplanı ve gölgeleme ile 3 boyutlu göstermeyi becerdim.

Fakat ikonları nasıl ekleyeceğim ?

Bu butonu nasıl yapabilirim?

Üye Girişi Yap