CSS ve jQuery ile Basit Eylem Çağrısı Düğmesi

Eylem çağrısı web tasarımında, bir web sayfasındaki, kullanıcıdan bir eylem talep eden (tıklatma, gezinme vb.) öğeler için kullanılan bir terimdir. Bugün gidiyoruz Bazı CSS ve jQuery ile etkin ve müthiş bir harekete geçirme ifadesi oluşturun Bu kullanıcının dikkatini çeker ve onu tıklamaya ikna eder .

Bu eğitim boyunca kullanılan kodun her satırını ayrıntılarıyla açıklayacağız ve bunun sizin için yararlı olacağını umuyoruz. Aşağıdaki öğretici kullanımlar HTML, CSS ve jQuery zorluk seviyesi ile Acemi ve tahmini tamamlanma süresi 45 dakika.

Öğreticiyi İndirin (.zip) veya gösteri

Bölüm I - Düğme Resmi Oluştur

Bu ilk bölümde, Photoshop ile gerekli görüntüleri basit ve kolay adımlarla nasıl oluşturacağınızı göstereceğiz. Hadi başlayalım.

Yeni bir Photoshop belgesi oluşturun 580 piksel genişliğinde ve 130 piksel yüksekliğinde. Git Görünüm > Yeni rehber sonra Oryantasyon için Yatay ve pozisyon 65px'e kadar.

Daha fazla kılavuz oluşturun; her biri üst, alt, sol ve sağ için. Yaptıktan sonra görüntünüzde aşağıdaki kılavuzlar bulunmalıdır:

Kılavuzlar kanvasınızı üst ve alt yarıya bölmüş gibi görünüyor. Seçin Yuvarlatılmış Dikdörtgen Takım, yı kur yarıçap 5 piksel kadar ve kanvasın üst yarısına dikdörtgen bir şekil çizin.

İçin Stilleri Değiştir Degrade Yerleşimi ve inme.

Seçin tip Araç ve tip “İndir” oluşturduğunuz kutuya örnek metin olarak. Metni kutunun ortasına hizalayın; çıktınız şöyle görünmelidir:

İndirme düğmesinin ilk durumunun oluşturulmasını tamamladık. Haydi yeni grup oluştur ve tüm katmanları içine taşıyın. Grubu çoğalt ve sonra ilk grubun altına yerleştirin. biz yarattık.

Çoğaltılmış gruba gidin ve Degrade Yerleşimi ve inme aşağıdaki dikdörtgenler ile ikinci dikdörtgen kutumuzun (asılı olan) stili:

İkinci grup seçiliyken Hareket Tüm dikdörtgen kutuyu tuvalin ikinci yarısına kadar hareket ettirmek için bir araç.

Bu kadar! İlk kısmı bitirdik. Resminizi farklı kaydet download.png ve en sevdiğiniz kod editörünü ateşleyin.

PSD indir

Bölüm II - HTML

Adım 1 - Gerekli dosyaları hazırlayın

Bir klasör oluşturun ve bir isim verin. Adını veririz jQueryCallToaction bu eğitim için. içeride jQueryCallToaction klasöründe aşağıdaki dosyaları / klasörleri oluşturun:

1. Boş HTML dosyası, index.html
2. Boş CSS dosyası, style.css
3. Boş JavaScript dosyası, script.js
4. "Adlı klasörGörüntüler"
5. yer download.png içeride Görüntüler Klasör.

2. Adım - Bağlantı index.html CSS ve JS ile

Hadi bağlayalım CSS ve JavaScript için index.html. Onları içine yerleştirin . İle başlıyoruz CSS dosyası:

sonra jQuery en son sürümü Google’ın AJAX Kütüphaneleri deposundan:

ve sonunda bizim JavaScript dosyası :

Şimdi bizim şöyle bir şey olmalı:

İçimizdeki düğmeler için kodları koyalım. etiket :

Açıklama: İki düğme için paragraflar oluşturduk. köprülü içeride. Satır 1: class = "Button1" içine yerleştirilir , 2. satırda: class = "Button1" içine yerleştirilir

 .button1 / * Yalnızca CSS'li düğme * / background: url (images / download.png) 0 0; yüksekliği: 65px; en: 580px; Ekran bloğu;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65 piksel;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; yüksekliği: 65px; en: 580px; Ekran bloğu;  .button2 a background-position: 0 0;  

 $ (document) .ready (function () $ ('. button2 a'). hover (function () $ (this) .stop (). animate ('opacity': '0', 500); , function () $ (this) .stop (). animate ('opacity': '1', 500);););