yandex

CSS3 ile Üzerine Gelince Dönen Buton Yapımı

Bu içerik 2 sene önce dogukanbatal tarafından yazılmıştır.
Paylaş:

Merhaba bu yazımda CSS3 ile Fare ile üzerine geldiğimizde dönecek olan bir buton yapıcağız.2 Adet buton yapıcaz birisi yatay birisi de dikey dönücek.Butonların ön izleme ve indirme linkleri aşağıda mevcuttur.

 

 

Başlayalım

İlk olarak HTML yapımı oluşturuyorum.Butonların olacağı div`in isimleri buton1 ve buton2 olucak.

Şimdide CSS bölümüne geçelim.Ben iki butondada aynı kodlar olmasın diye böyle yazdım direk a etiketini biçimlendirdim.

Buton1 için aşağıdaki CSS kodlarını yazalım.Uzun oldu ama ne işe yaradıklarını anlatayım.

Yukarıda Buton1 de float:left kullandık ve butonu sağa çektik bir sonraki buton bu butonun yanına gelecek.Genişlik yükseklik değerlerini belirttik ve a özelliğinde arka planını ve kenarlık rengini belirttik.Hover bölümünde ise üzerine gelince hangi renk olucağı ve nasıl dönüceğini belirttik. Y konumunda yatay olarakı 360deg yani 360 derece dönecek.Transition ile de animasyonun hızını ayarladık.

Şimdide buton2 kodlarında tek fark renkler ve dönme şeklinde kodları tekrar açıklamama gerek yok.

Evet İşlemlerimiz bu kadar bu dersimizinde sonuna geldik.İyi Çalışmalar…

Güncelleme: 17/05/2015 – Video eklenmiştir.

 

 

YORUMLAR ;