Λύθηκε: κουμπί html href

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

<button><a href="">Click Here</a></button>

1. Αυτή η γραμμή κώδικα δημιουργεί ένα στοιχείο κουμπιού σε HTML.
2. Μέσα στο στοιχείο του κουμπιού, υπάρχει μια ετικέτα αγκύρωσης με ένα κενό χαρακτηριστικό href.
3. Η ετικέτα αγκύρωσης περιέχει το κείμενο "Κάντε κλικ εδώ".

Ορισμός του HREF

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

.

Μπορώ να χρησιμοποιήσω το HREF σε HTML κουμπιών

Όχι, δεν είναι δυνατό να χρησιμοποιηθεί ένα χαρακτηριστικό href σε ένα στοιχείο κουμπιού σε HTML. Το στοιχείο κουμπί δεν υποστηρίζει το χαρακτηριστικό href. Ωστόσο, μπορείτε να χρησιμοποιήσετε τη JavaScript για να προσθέσετε ένα πρόγραμμα ακρόασης συμβάντων κλικ στο κουμπί που θα μεταφέρει τον χρήστη σε διαφορετική σελίδα όταν γίνει κλικ.

Πώς διαμορφώνετε το στυλ ενός href ως κουμπί

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

Κουμπί Κειμένου

Στη συνέχεια, προσθέστε το ακόλουθο CSS στο φύλλο στυλ σας:

.κουμπί {
χρώμα φόντου: #4CAF50; /* Πράσινο */
περίγραμμα: κανένα;
άσπρο χρώμα;
συμπλήρωση: 15px 32px;
κείμενο-ευθυγράμμιση: κέντρο;
κείμενο-διακόσμηση: κανένα?
οθόνη: inline-block; μέγεθος γραμματοσειράς: 16 px; περιθώριο: 4px 2px; δρομέας: δείκτης;}

Σχετικές αναρτήσεις:

Αφήστε ένα σχόλιο