CSS

Rengarenk CSS3 Butonlar Oluşturma

google fonts, text-shadow, box-shadow ile zenginleştirilmiş birbirinden güzel 20 tane buton.

Temel buton tasarımında .button{ padding:5px 15px 5px 15px; text-decoration: none; display: inline-block; -border-radius: 10px; tanımlamalarının yanında her bir buton için ek bir kaç düzenleme daha yapacağız. Aşağıda adım adım butonlar oluşturulmuştur.

DEMO

Adım 1: Head Etiketinin Oluşturulması

Head etiketleri arasında tasarımda kullanacağımız tasarim.css dosyasını ve google fonts sitesinden sitemize dahil edeceğimizi fontu aşağıdaki gibi belirledik.

 

Adım 2: HTML Etiketlerinin Oluşturulması

 

Adım 3: Temel CSS Tanımlamaları

Bu adımda sitenin arkaplanını ve buton için gerekli olan tasarımı oluşturacağız.  Buton tasarımında genel CSS düzenlemelerin dışında font-family özelliğine google font sitesinden aldığım fontu etkedim.

 

Ekran görüntüsü aşağıdaki gibi oluşacaktır.

CSS buton

 

Adım 4: Butonları CSS Tanımlamaları

Şimdi sıra geldi her bir butonun tasarımını istediğimiz gibi değiştirmeye. CSS tanımlamaları kolay olsun diye her bir buton için btn* classını kullandım.

CSS buton

 

[divider]

Son olarak botunların arkasına gradient geçiş oluşturmak istenirse .button css kodunu aşağıdaki gibi yeniden düzenlemek gerekecektir.

 

Ekran görüntüsü aşağıdaki oluşacaktır.

CSS buton

 

Yorum

Yorum Yap