Pazartesi , 23 Ocak 2017
Anasayfa » WEB » CSS » Rengarenk CSS3 Butonlar Oluşturma

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

 

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

 

Hakkında Hayri

İlginizi Çekebilir

CSS ile Etkili Resim Efektleri

Eskiden can alıcı görüntüler oluşturmak için Photoshop gibi grafik programlarından faydalanırdık. Günümüzde CSS’e eklenen bir …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Wordpress Tema indir