Πώς δημιουργείται ένα κουμπί. Κουμπί html: εφαρμογή, παραγωγή

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

Συνήθως αυτή η σειρά ονομάζεται φιλική (διαισθητική) διεπαφή. Ένα κουμπί Html είναι απλώς ένα απαραίτητο εργαλείο για να βάλετε τα πράγματα σε τάξη σε έναν ιστότοπο και να οργανώσετε μια φιλική προς τον χρήστη διεπαφή.

Πώς να φτιάξετε ένα κουμπί σε HTML;

Τα κουμπιά για έναν ιστότοπο HTML δημιουργούνται με έναν από τους δύο τρόπους:

1. Με ετικέτα εισαγωγής. Η σύνταξη για μια τέτοια εντολή είναι η εξής:

2. Χρησιμοποιώντας την ετικέτα κουμπιού:

Ετικέτα σε κουμπί Παράδειγμα κώδικα που δημιουργεί ένα κουμπί σε html με δύο τρόπους ταυτόχρονα: Κουμπί

Κουμπί 2

Το αποτέλεσμα είναι δύο πανομοιότυπα κουμπιά:

Έτσι, αν και το αποτέλεσμα είναι δύο απολύτως πανομοιότυπα κουμπιά html, ο κώδικας για αυτά είναι ελαφρώς διαφορετικός. Δεν έχει σημασία πώς δημιουργείτε το κουμπί σε html.

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

Αλλά ταυτόχρονα παλιές εκδόσεις του προγράμματος περιήγησης Internet Explorerενδέχεται να μην αποδίδει σωστά τη σύγχρονη ετικέτα κουμπιού.

Τύποι κουμπιών HTML 1. Κουμπί σύνδεσης HTML

Κουμπί με Σύνδεσμος HTML(για παράδειγμα, ένα κουμπί επιστροφής για έναν ιστότοπο html ή ένα κουμπί επιστροφής html) μπορεί να δημιουργηθεί χρησιμοποιώντας συνδέσμους "αγκύρωσης". Μια τυπική "άγκυρα" μοιάζει με αυτό:

Μια τέτοια «άγκυρα» είναι αόρατη και μπορεί να τοποθετηθεί σε οποιοδήποτε μέρος κρίνετε κατάλληλο. Για να μεταβείτε στην "άγκυρα", χρησιμοποιήστε την ακόλουθη εντολή:

όνομα κουμπιού

Κάνοντας κλικ στο όνομα του κουμπιού μετακινείται αμέσως ο κέρσορας στην "άγκυρα".
Ας υποθέσουμε ότι χρειαζόμαστε ένα κουμπί για να πάμε στην αρχή στο κάτω μέρος του ιστότοπου και ένα κουμπί για να πάει κάτω στην αρχή:

Αγκυρα

κάτω

…

επάνω

…

Μοιάζει με αυτό:

2. Κουμπί υποβολής

Υπάρχουν κουμπιά όπως το Submit για την αποστολή πληροφοριών που εισάγονται από έναν επισκέπτη της τοποθεσίας στον διακομιστή. Για παράδειγμα, απλούστερη οργάνωσηη εισαγωγή του κωδικού πρόσβασης μοιάζει με αυτό:

3. Κουμπί επαναφοράς

Τα κουμπιά τύπου επαναφοράς έχουν σχεδιαστεί για να ενημερώνουν τα δεδομένα της φόρμας (επιστροφή τους σε αρχική κατάσταση). Για να δημιουργήσετε ένα τέτοιο κουμπί, χρησιμοποιήστε τον ακόλουθο κώδικα:

4. Κουμπί HTML με εικόνα

Σε HTML, τα κουμπιά μπορούν να διακοσμηθούν με οποιεσδήποτε εικόνες. Για να το κάνετε αυτό, απλώς χρησιμοποιήστε τον ακόλουθο κώδικα:

Κουμπί με εικόνα και κείμενο:

Για παράδειγμα:

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

Καλό Κακό

Έχετε δει πιθανώς στον ιστότοπό μου, στο βιβλίο επισκεπτών ή στο φόρουμ, φόρμες για την προσθήκη μηνυμάτων με ειδικά κουμπιά. Και αν ήθελες να πάρεις το ίδιο...

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

Ένα κουμπί σε μια ιστοσελίδα μπορεί να δημιουργηθεί με δύο τρόπους - χρησιμοποιώντας μια ετικέτα και μια ετικέτα.

Ας δούμε πρώτα την προσθήκη ενός κουμπιού μέσω και τη σύνταξή του.

Τα χαρακτηριστικά του κουμπιού παρατίθενται στον πίνακα. 1.

Η δημιουργία ενός κουμπιού φαίνεται στο παράδειγμα 1.

Παράδειγμα 1: Προσθήκη κουμπιού

HTML5 IE Cr Op Sa Fx

Κουμπί

Διαστήματα στην ετικέτα στο κουμπί, σε αντίθεση με Κείμενο HTML, λαμβάνονται υπόψη, ώστε να μπορείτε να βάλετε οποιοδήποτε αριθμό διαστημάτων, τα οποία τελικά επηρεάζουν το πλάτος του κουμπιού. Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Προβολή κουμπιού

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

Ρύζι. 2. Κουμπιά που δημιουργούνται χρησιμοποιώντας

Η σύνταξη για τη δημιουργία ενός τέτοιου κουμπιού είναι η εξής.

Ετικέτα στο κουμπί

Τα χαρακτηριστικά παρατίθενται στον πίνακα. 1, αλλά σε αντίθεση με ένα κουμπί, το χαρακτηριστικό value καθορίζει μόνο την τιμή που αποστέλλεται στον διακομιστή και όχι την ετικέτα στο κουμπί. Εάν θέλετε να εμφανίσετε μια εικόνα σε ένα κουμπί, τότε η ετικέτα προστίθεται στο εσωτερικό όπως φαίνεται στο παράδειγμα 2.

Παράδειγμα 2. Σχέδιο σε κουμπί

HTML5 IE Cr Op Sa Fx

Κουμπί

Κουμπί με κείμενο Κουμπί με μια εικόνα

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

Κουμπί υποβολής

Χρησιμοποιείται για την αποστολή δεδομένων στον διακομιστή ειδικό κουμπίΥποτάσσομαι. Η εμφάνισή του δεν διαφέρει από τα συνηθισμένα κουμπιά, αλλά όταν κάνετε κλικ σε αυτό, εκτελείται πρόγραμμα διακομιστή, διευκρινίστηκε χαρακτηριστικό δράσηςετικέτα. Αυτό το πρόγραμμα, που ονομάζεται επίσης χειριστής φορμών, λαμβάνει τα δεδομένα που εισάγει ο χρήστης στα πεδία φόρμας, εκτελεί τους απαραίτητους χειρισμούς μαζί τους και στη συνέχεια επιστρέφει το αποτέλεσμα με τη μορφή εγγράφου HTML. Το τι ακριβώς κάνει ο χειριστής εξαρτάται από τον συγγραφέα του ιστότοπου, για παράδειγμα, παρόμοια τεχνολογία χρησιμοποιείται για τη δημιουργία ερευνών, φόρουμ, δοκιμών και πολλά άλλα.

Σύνταξη δημιουργίας Κουμπιά υποβολήςεξαρτάται από την ετικέτα ή .

Ετικέτα στο κουμπί

Τα χαρακτηριστικά είναι τα ίδια με τα συνηθισμένα κουμπιά (παράδειγμα 3).

Παράδειγμα 3: Αποστολή δεδομένων στον διακομιστή

HTML5 IE Cr Op Sa Fx

Κουμπί

Το χαρακτηριστικό name για αυτόν τον τύπο κουμπιού μπορεί να παραλειφθεί. Εάν δεν καθορίσετε μια τιμή , το πρόγραμμα περιήγησης θα προσθέσει αυτόματα κείμενο, το οποίο ποικίλλει ανάλογα με το πρόγραμμα περιήγησης. Έτσι, ο Firefox γράφει "Υποβολή αιτήματος", IE - "Υποβολή αιτήματος", Opera και Chrome - "Υποβολή". Το ίδιο το κείμενο της επιγραφής δεν επηρεάζει τη λειτουργικότητα του κουμπιού με κανέναν τρόπο.

Κουμπί επαναφοράς

Όταν κάνετε κλικ στο κουμπί Επαναφορά, τα δεδομένα της φόρμας επιστρέφουν στην αρχική τους τιμή. Συνήθως, αυτό το κουμπί χρησιμοποιείται για τη διαγραφή πληροφοριών που έχουν εισαχθεί στα πεδία της φόρμας. Για μεγάλες φόρμες από χρήση Κουμπιά επαναφοράςΕίναι καλύτερα να αρνηθείτε εντελώς, για να μην κάνετε κλικ σε αυτό κατά λάθος, γιατί τότε θα πρέπει να συμπληρώσετε ξανά τη φόρμα.

Σύνταξη δημιουργίας καθορισμένο κουμπίαπλά και παρόμοια με άλλα κουμπιά.

Ετικέτα στο κουμπί

Το Παράδειγμα 4 δείχνει μια φόρμα με ένα πεδίο κειμένου, το οποίο περιέχει ήδη προεισαγμένο κείμενο χρησιμοποιώντας το χαρακτηριστικό value της ετικέτας. Αφού αλλάξετε το κείμενο και κάνετε κλικ στο κουμπί "Εκκαθάριση", η τιμή του πεδίου θα αποκατασταθεί και η επιγραφή "Εισαγωγή κειμένου" θα εμφανιστεί ξανά σε αυτό.

Παράδειγμα 4. Κουμπί για εκκαθάριση της φόρμας

HTML5 IE Cr Op Sa Fx

Κουμπί

Η τιμή του κουμπιού Επαναφορά δεν αποστέλλεται ποτέ στον διακομιστή. Εάν παραλείψετε την ετικέτα στο κουμπί, με άλλα λόγια, δεν ορίσετε το χαρακτηριστικό τιμής, το κείμενο "Διαγραφή" θα προστεθεί στο κουμπί από προεπιλογή.

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

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

Ας δούμε πρώτα την προσθήκη ενός κουμπιού μέσω και τη σύνταξή του.

Τα χαρακτηριστικά του κουμπιού παρατίθενται στον πίνακα. 1.

Η δημιουργία ενός κουμπιού φαίνεται στο παράδειγμα 1.

Παράδειγμα 1: Προσθήκη κουμπιού

Κουμπί

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

Ρύζι. 1. Προβολή κουμπιού

Υπάρχουν ορισμένοι υποχρεωτικοί κανόνες για τέτοια κουμπιά:

• ;
• δεν μπορεί να τοποθετηθεί μέσα σε κουμπιά.
• το χαρακτηριστικό value δεν μπορεί να είναι κενό.

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

Ρύζι. 2. Κουμπιά που δημιουργούνται χρησιμοποιώντας

Η σύνταξη για τη δημιουργία ενός τέτοιου κουμπιού είναι η εξής.

Ετικέτα στο κουμπί

Τα χαρακτηριστικά παρατίθενται στον πίνακα. 1, αλλά σε αντίθεση με ένα κουμπί, το χαρακτηριστικό value καθορίζει μόνο την τιμή που αποστέλλεται στον διακομιστή και όχι την ετικέτα στο κουμπί. Εάν θέλετε να εμφανίσετε μια εικόνα σε ένα κουμπί, τότε προστίθεται στο εσωτερικό όπως φαίνεται στο παράδειγμα 2.

Παράδειγμα 2. Σχέδιο σε κουμπί

Κουμπί

Κουμπί με κείμενο Κουμπί με μια εικόνα

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

Υπάρχουν επίσης ορισμένοι περιορισμοί:

• Δεν μπορείτε να βάλετε συνδέσμους μέσα ;
• το ένα δεν μπορεί να τοποθετηθεί μέσα στο άλλο.

Κουμπί υποβολής

Υπάρχει ένα ειδικό κουμπί Υποβολή για αποστολή δεδομένων στον διακομιστή. Η εμφάνισή του δεν διαφέρει από τα κανονικά κουμπιά, αλλά όταν κάνετε κλικ σε αυτό, πηγαίνει στον χειριστή φόρμας στη διεύθυνση που καθορίζεται από το χαρακτηριστικό action του στοιχείου. Το πρόγραμμα χειρισμού λαμβάνει τα δεδομένα που έχει εισαγάγει ο χρήστης στα πεδία φόρμας, εκτελεί τους απαραίτητους χειρισμούς με αυτά και στη συνέχεια επιστρέφει το αποτέλεσμα με τη μορφή εγγράφου HTML. Το τι ακριβώς κάνει ο χειριστής εξαρτάται από τον συγγραφέα του ιστότοπου, για παράδειγμα, παρόμοια τεχνολογία χρησιμοποιείται για τη δημιουργία ερευνών, φόρουμ, δοκιμών και πολλά άλλα.

Η σύνταξη για τη δημιουργία ενός κουμπιού Υποβολή εξαρτάται από το ή το στοιχείο που χρησιμοποιείται.

Ετικέτα στο κουμπί

Τα χαρακτηριστικά είναι τα ίδια με τα συνηθισμένα κουμπιά (παράδειγμα 3), αλλά η τιμή του χαρακτηριστικού τιμής μπορεί τώρα να παραλειφθεί, επειδή το πρόγραμμα περιήγησης θα εισάγει το ίδιο το κείμενο, αυτό ποικίλλει ανάλογα με το πρόγραμμα περιήγησης. Έτσι, ο Firefox γράφει "Υποβολή αιτήματος", IE - "Υποβολή αιτήματος", Opera και Chrome - "Υποβολή". Το ίδιο το κείμενο της επιγραφής δεν επηρεάζει τη λειτουργικότητα του κουμπιού με κανέναν τρόπο.

Παράδειγμα 3: Αποστολή δεδομένων στον διακομιστή

Κουμπί

Κουμπί επαναφοράς

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

Η σύνταξη για τη δημιουργία του καθορισμένου κουμπιού είναι απλή και παρόμοια με άλλα κουμπιά.

Ετικέτα στο κουμπί

Το Παράδειγμα 4 δείχνει μια φόρμα με ένα πεδίο κειμένου που περιέχει ήδη προ-εισαγμένο κείμενο χρησιμοποιώντας το χαρακτηριστικό value του στοιχείου. Αφού αλλάξετε το κείμενο και κάνετε κλικ στο κουμπί "Διαγραφή", η τιμή του πεδίου θα αποκατασταθεί και η επιγραφή "Εισαγωγή κειμένου" θα εμφανιστεί ξανά σε αυτό.

• Φροντιστήριο

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

Σε ποιον απευθύνεται αυτό το άρθρο;

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

Δεύτερον, για τον σχεδιαστή διάταξης που έλαβε διάταξη χωρίς καταστάσεις, ώστε να υπάρχει κάπου να στείλει τον σχεδιαστή.

Τρίτον, αντί για άλλη μια παρωδία σχετικά με τη διαφορά στα κουμπιά/συνδέσμους και την ανάγκη για σχέδιο κατάστασης, απλά δώστε .

ΣύνδεσμοιΕισαγωγή Συνδέστε ποιο κουμπί

CSS Για λόγους σαφήνειας, αυτή είναι η δική μου εκδοχή ενός ποδηλάτου που φαίνεται λίγο περίεργο, αλλά θα το κάνει για παράδειγμα.

Κανονικό, τοποθετήστε το δείκτη του ποντικιού, κάντε κλικ, απενεργοποιήθηκε ανάλογα.button - κανονική κατάσταση κουμπιού ( φόντο: κανένα; περίγραμμα: κανένα; περίγραμμα: κανένα; μετασχηματισμός κειμένου: κεφαλαία; ) button:hover , button:focus - στο κουμπί τοποθέτησης: κανένα κουμπί: εστίαση ( χρώμα: hsla(108, 12%, 0%, 1); πλαίσιο-σκιά: -1px 1px 2px hsla(108, 62%, 42%, 1); χρώμα φόντου: hsla(108, 62%, 92 %, 1) ) κουμπί: ενεργό - τη στιγμή του κουμπιού κλικ: ενεργό ( χρώμα: hsla(108, 42%, 32%, 1); σκιά πλαισίου: -2 px 4 px 8 px hsla(64, 64%, 42% , 1 ); - σκιά: κανένας, αδιαφάνεια: 1

Εμφάνιση CSS

κουμπί ( περιθώριο: .8rem; μέγεθος γραμματοσειράς: 1.42rem; padding: 1rem; φόντο: hsla(180, 90%, 64%, 1); χρώμα: hsla(180, 90%, 12%, 1); κείμενο- σκιά: 1px 1px hsla(180, 90%, 32%, 1 box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, ); %, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180 , 90%, όριο 180, 92%, 56% : hsla (180%, 64%, 1); Κανένας: σχετική μετάβαση: όλα τα 0,22 σημ. , 1) συμπαγές χρώμα περιγράμματος: hsla(420 , 90%, 64%, 1 κουτί-σκιά: -4 px 0 0 hsla (420, 90%, 22%, .87), -3 px 4 px); 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1 ) button:focus ( background: hsla(108, 90%, 42%, 1); 87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1 ), ένθετο 1px 1px 4px 0 hsla(420, 0%, 22%, 1); )

Για έναν σχεδιαστή, μπορεί να μην ξέρεις τα ceeses, αλλά πρέπει να σχεδιάσεις τις πολιτείες!

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

Σας ευχαριστώ

Σας ευχαριστώ που διαβάσατε. Όλα όσα γράφονται εδώ δεν είναι 100% η απόλυτη αλήθεια.
Αποθήκη

GitHub

Σύνδεσμος προς το αποθετήριο αυτού του άρθρου. Εάν θέλετε να προσθέσετε ή να διορθώσετε, στείλτε ένα αίτημα έλξης

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

Υπάρχουν δύο προσεγγίσεις για τη δημιουργία ενός κουμπιού σε έναν ιστότοπο με τη μορφή συνδέσμου. Ας δούμε αναλυτικά το καθένα από αυτά.

1. Κουμπί σε μορφή εικόνας

Αυτή είναι η απλούστερη προσέγγιση για τη δημιουργία ενός κουμπιού ως συνδέσμου σε έναν ιστότοπο. Για να το κάνετε αυτό, απλά πρέπει να βρείτε μια κατάλληλη εικόνα για το κουμπί. Για παράδειγμα, η εικόνα με το κουμπί σας ονομάζεται button.jpg. Στη συνέχεια, για να δημιουργήσετε τη σύνδεση, ο κώδικας θα πρέπει να είναι ο εξής:

... ...

Αυτό μετατρέπεται στη σελίδα του ιστότοπου:

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

Παρεμπιπτόντως, υπάρχει ένας ειδικός ιστότοπος για τη δημιουργία εικόνων για κουμπιά: http://dabuttonfactory.com/. Εδώ μπορείτε να δημιουργήσετε ένα κουμπί δωρεάν σύμφωνα με το γούστο σας (ορίστε ένα στυλ, επιλέξτε μια εικόνα, γράψτε κατάλληλο κείμενο κ.λπ.).

2. Κουμπί με χρησιμοποιώντας HTMLετικέτα

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

... ...

Έτσι θα μοιάζει περίπου στη σελίδα:

Αντί για URL1 και URL2, πρέπει να γράψετε τις διευθύνσεις των σελίδων στις οποίες πρέπει να πάτε. Εάν θέλετε οι σύνδεσμοι να ανοίγουν σε νέες καρτέλες (ανάλογα με το χαρακτηριστικό target="_blank" της ετικέτας a), τότε αντί για onclick="javascript:window.location="..."" πρέπει να γράψετε onclick=" javascript:window.open ="..."" (αντικαταστήστε την τοποθεσία με open).

Είμαι σχεδόν βέβαιος ότι θα θέλετε να σχεδιάσετε το κουμπί με κάποιο τρόπο διαφορετικά (για να ταιριάζει με τη σχεδίαση του ιστότοπού σας). Για να το κάνετε αυτό, εισάγετε την κλάση btn:

.btn ( //Ορίστε το γενικό στυλ για το ύψος του κουμπιού :30 εικονοστοιχεία; χρώμα περιγράμματος :#c2e254 #9bb838 #9bb838 #c2e254 ; στυλ περιγράμματος :solid ; πλάτος περιγράμματος :1 px ; φόντο :#c2e254 ; δρομέας :σημείο. ). εστίαση ( / / Στυλ κουμπιού όταν βρίσκεται σε φόντο εστίασης :#ddd ; χρώμα περιγράμματος :#ddd #333 #333 #ddd ; στυλ περιγράμματος :solid ; πλάτος περιγράμματος :1 px ) .btn:active ( //Στυλ κουμπιού όταν γίνεται κλικ φόντο :#ff0000 border-color :#ddd #333 #ddd ;

Μετά από αυτό, το κουμπί θα μοιάζει με αυτό στη σελίδα.