Απλό κουμπί Κλήση στη δράση Με CSS & jQuery

Πρόσκληση σε δράση στο σχεδιασμό ιστοσελίδων είναι ένας όρος που χρησιμοποιείται για στοιχεία μιας ιστοσελίδας που απαιτούν μια ενέργεια από τον χρήστη (κάνοντας κλικ, δείχνοντας κλπ.). Σήμερα θα πάμε δημιουργήστε ένα αποτελεσματικό και φοβερό κουμπί κλήσης για δράση με ορισμένα CSS και jQuery που αρπάζουν την προσοχή του χρήστη και τον δελεάζουν να κάνει κλικ .

Σε αυτό το σεμινάριο εξηγούμε κάθε γραμμή χρησιμοποιούμενου κώδικα με λεπτομέρειες και ελπίζουμε ότι θα είναι χρήσιμο για εσάς. Το παρακάτω εγχειρίδιο χρησιμοποιεί HTML, CSS και jQuery με επίπεδο δυσκολίας Αρχάριος και υπολογιζόμενη ώρα ολοκλήρωσης 45 λεπτά.

Λήψη φροντιστηρίου (.zip) ή Διαδήλωση

Μέρος Ι - Δημιουργία εικόνας κουμπιού

Σε αυτό το πρώτο μέρος θα σας δείξουμε πώς μπορείτε να δημιουργήσετε τις απαραίτητες εικόνες με το Photoshop σε απλά απλά βήματα. Ας αρχίσουμε.

Δημιουργήστε ένα νέο έγγραφο του Photoshop με πλάτος 580px και ύψος 130px. Παω σε Θέα > Νέος οδηγός στη συνέχεια, ρυθμίστε το Προσανατολισμός προς το Οριζόντιος και το Θέση σε 65px.

Δημιουργήστε περισσότερους οδηγούς. καθένα για την κορυφή, κάτω, αριστερά και δεξιά. Η εικόνα σας θα πρέπει να έχει τους ακόλουθους οδηγούς μόλις τελειώσετε:

Οι οδηγοί φαίνεται να χωρίζουν τον καμβά σας στο πάνω και στο κάτω μισό. Επίλεξε το Στρογγυλεμένο ορθογώνιο εργαλείο, ρυθμίστε το Ακτίνα κύκλου έως 5px και σχεδιάστε ένα ορθογώνιο σχήμα στο πάνω μισό του καμβά.

Αλλάξτε τα Στυλ για Επικάλυψη διαβαθμίσεων και Κτύπημα.

Επίλεξε το Τύπος Εργαλείο και τύπος “Κατεβάστε” ως δείγμα κειμένου στο πλαίσιο που έχετε δημιουργήσει. Ευθυγραμμίστε το κείμενο στο κεντρικό κέντρο του κιβωτίου και η έξοδος σας θα πρέπει να φαίνεται κάπως έτσι:

Τελειώσαμε τη δημιουργία της πρώτης κατάστασης του κουμπιού λήψης. Ας είναι δημιουργήστε μια νέα ομάδα και μετακινήστε όλα τα στρώματα σε αυτό. Διπλασιάστε την ομάδα και στη συνέχεια τοποθετήστε το κάτω από την πρώτη ομάδα. έχουμε δημιουργήσει.

Προχωρήστε στην ομάδα που αντιγράψατε και αλλάξτε την Επικάλυψη διαβαθμίσεων και Κτύπημα στυλ του δεύτερου ορθογώνιου κιβωτίου μας (του κυλιόμενου κουτιού) με τις ακόλουθες ρυθμίσεις:

Με τη δεύτερη ομάδα που επιλέξατε, χρησιμοποιήστε Κίνηση εργαλείο για να μετακινήσετε ολόκληρο το ορθογώνιο πλαίσιο στο δεύτερο μισό του καμβά.

Αυτό είναι! Τελειώσαμε με το πρώτο μέρος. Αποθηκεύστε την εικόνα ως download.png και ενεργοποιήστε τον αγαπημένο σας επεξεργαστή κώδικα.

Λήψη PSD

Μέρος II - Το HTML

Βήμα 1 - Προετοιμασία των απαραίτητων αρχείων

Δημιουργήστε ένα φάκελο και δώστε το όνομα. Θα το ονομάσουμε jQueryCallToaction για αυτό το σεμινάριο. Μέσα jQueryCallToaction φάκελο, δημιουργήστε τα ακόλουθα αρχεία / φακέλους:

1. Λευκό αρχείο HTML, index.html
2. Κενό αρχείο CSS, style.css
3. Κενό αρχείο JavaScript, script.js
4. Φάκελος με το όνομα "εικόνες"
5. Θέση download.png μέσα εικόνες ντοσιέ.

Βήμα 2 - Σύνδεσμος index.html με CSS & JS

Ας συνδεθούμε CSS και JavaScript προς το index.html. Τοποθετήστε τα μέσα . Αρχίζουμε με το CSS:

μετά το τελευταία έκδοση του jQuery από την αποθήκη βιβλιοθηκών AJAX της Google:

και τελικά μας Αρχείο JavaScript :

Τώρα μας θα πρέπει να φαίνεται κάτι τέτοιο:

Ας δώσουμε κώδικες για τα κουμπιά μας μέσα ετικέτα:

Εξήγηση: Δημιουργήσαμε παραγράφους για δύο κουμπιά, κάθε ένα με τυλιγμένο με υπερσύνδεσμο μέσα. Γραμμή 1: class = "button1" τοποθετείται μέσα , ενώ η Γραμμή 2: class = "button1" τοποθετείται μέσα

 .Κουμπί1 / * Πλήκτρο μόνο με CSS * / background: url (images / download.png) 0 0; ύψος: 65px; πλάτος: 580px; εμφάνιση: μπλοκ?  .button1: hover / * mouseOver * / φόντο: url (images / download.png) 0 65px;  

 .κουμπί2, .button2 α φόντο: url (εικόνες / λήψη.png) 0 -65px; ύψος: 65px; πλάτος: 580px; εμφάνιση: μπλοκ?  .button2 a background-position: 0 0;  

 ('opacity': '0', 500), () () (). , λειτουργία () $ (this) .stop () animate ('opacity': '1', 500);););