Αυτό το παράδειγμα χρησιμοποιεί μόνο τα στοιχεία ελέγχου της γεννήτριας. Οι παραπάνω εικόνες δείχνουν πραγματικά ληφθέντα φύλλα στυλ που εφαρμόζονται σε συνηθισμένα κουμπιά HTML, όχι στιγμιότυπα οθόνης του προγράμματος επεξεργασίας.
Ανοίξτε τη Γεννήτρια Κουμπιών CSS
Ξεκινήστε με το Signature
Ανοίξτε τη Γεννήτρια Κουμπιών CSS. Στις Προεπιλογές, επιλέξτε Signature από τη συλλογή Everyday. Ορίστε το κείμενο του κουμπιού σε “Get started”. Στην περιοχή κώδικα, ορίστε το όνομα κλάσης σε cta-button.
Μια προεπιλογή αντικαθιστά τα προεπιλεγμένα στυλ και τα στυλ αιώρησης, ενώ η ετικέτα και το όνομα κλάσης σας παραμένουν. Επιλέξτε το σημείο εκκίνησης πριν κάνετε λεπτομερείς προσαρμογές.
Το όνομα κλάσης συνδέει τους κανόνες CSS με το κουμπί HTML σας. Η γεννήτρια καθαρίζει τους μη υποστηριζόμενους χαρακτήρες· χρησιμοποιήστε ένα σύντομο, διακριτικό όνομα για να αποφύγετε τη διαμόρφωση άσχετων στοιχείων.
Δημιουργήστε το στρογγυλεμένο κουμπί με διαβάθμιση
Κρατήστε την κατάσταση Επεξεργασίας στο Προεπιλογή. Στο Κείμενο, επιλέξτε System sans, μέγεθος γραμματοσειράς 18 px και βάρος Bold. Διατηρήστε το λευκό χρώμα κειμένου, το κανονικό στυλ, την κεντραρισμένη στοίχιση και το ύψος γραμμής 1.4.
Στο Γέμισμα, επιλέξτε Γραμμική διαβάθμιση. Χρησιμοποιήστε τα δύο χρώματα και τη γωνία παρακάτω. Ορίστε την οριζόντια εσωτερική απόσταση σε 32 px και την κάθετη εσωτερική απόσταση σε 16 px. Στο Σχήμα, διατηρήστε ενεργοποιημένη τη Σύνδεση όλων των γωνιών και ορίστε την ακτίνα γωνίας σε 100 px. Το πλάτος περιγράμματος παραμένει 0 px.
Στη Σκιά, διατηρήστε ενεργοποιημένη τη Σκιά πλαισίου. Χρησιμοποιήστε οριζόντια μετατόπιση 0 px, κάθετη μετατόπιση 8 px, θόλωση 24 px, εξάπλωση −4 px, χρώμα #460BD8 και αδιαφάνεια 32%. Αφήστε τη σκιά εσωτερικού και τη σκιά κειμένου απενεργοποιημένες.
Η εσωτερική απόσταση αλλάζει τον χώρο γύρω από το κείμενο. Η ακτίνα γωνίας αλλάζει το περίγραμμα. Μια μεγάλη ακτίνα δημιουργεί αυτό το στρογγυλεμένο σχήμα χωρίς να κάνει την ετικέτα ευρύτερη.
Δώστε στην αιώρηση τη δική της επεξεργασία
Αλλάξτε την κατάσταση Επεξεργασίας σε Αιώρηση. Στο Γέμισμα, αλλάξτε το χρώμα φόντου σε #33099E και το δεύτερο χρώμα σε #6D20BF. Διατηρήστε τη γωνία διαβάθμισης στις 135°. Στη Σκιά, αλλάξτε την κάθετη μετατόπιση σε 10 px και τη θόλωση σε 28 px. Αφήστε τις άλλες ρυθμίσεις αμετάβλητες.
Χρησιμοποιήστε τα κουμπιά Προεπιλογή, Αιώρηση και Ενεργό στον καμβά για να επιθεωρήσετε κάθε κατάσταση. Μπορείτε επίσης να περάσετε το ποντίκι πάνω από το κουμπί προεπισκόπησης ή να το πατήσετε. Αλλάξτε τον καμβά μεταξύ ανοιχτού και σκούρου για να ελέγξετε την άκρη και τη σκιά του.
Η κατάσταση επεξεργασίας επιλέγει ποια στυλ αλλάζετε. Η κατάσταση του καμβά αλλάζει μόνο αυτό που βλέπετε στην προεπισκόπηση. Επιστρέψτε στην προεπιλεγμένη επεξεργασία πριν προσαρμόσετε την εμφάνιση ηρεμίας.
Οι ιδιότητες αιώρησης που εξακολουθούν να ταιριάζουν με την προεπιλογή ακολουθούν μεταγενέστερες προεπιλεγμένες επεξεργασίες. Μόλις προσαρμόσετε μια ιδιότητα αιώρησης, παραμένει ανεξάρτητη. Ελέγξτε ξανά και τις δύο καταστάσεις μετά την αλλαγή του βασικού στυλ.
Εξαγωγή και δοκιμή στη σελίδα σας
Επιλέξτε την καρτέλα CSS και χρησιμοποιήστε την Αντιγραφή CSS, ή επιλέξτε Λήψη για να αποθηκεύσετε το cta-button.css. Επιλέξτε την καρτέλα HTML και αντιγράψτε την αντίστοιχη σήμανση κουμπιού. Το HTML περιλαμβάνει το ίδιο όνομα κλάσης και ένα κουμπί με type="button".
Προσθέστε το CSS στο φύλλο στυλ σας ή συνδέστε το αρχείο που κατεβάσατε από τη σελίδα σας. Τοποθετήστε το HTML εκεί που ανήκει το κουμπί. Οι δύο εξαγωγές λειτουργούν μαζί: ένα κουμπί HTML από μόνο του δεν περιλαμβάνει τη διαμόρφωσή του.
Ανοίξτε τη σελίδα και δοκιμάστε τις καταστάσεις προεπιλογής, αιώρησης, εστίασης πληκτρολογίου και πατημένης κατάστασης. Η εξαγωγή περιλαμβάνει ένα περίγραμμα εστίασης-ορατότητας, μια μικρή ενεργή κίνηση και έναν κανόνα μειωμένης κίνησης. Τα γύρω στυλ και οι εγκατεστημένες γραμματοσειρές σας μπορούν ακόμα να επηρεάσουν το αποτέλεσμα.
Το παραγόμενο κουμπί είναι ένα διαμορφωμένο στοιχείο ελέγχου. Συνδέστε τη συμπεριφορά κλικ στο έργο σας· χρησιμοποιήστε τον σωστό τύπο κουμπιού όταν το προσθέτετε σε μια φόρμα.
cta-button.css
Το όνομα του αρχείου λήψης ακολουθεί το όνομα της κλάσης.
Συχνές ερωτήσεις
Χρειάζομαι ένα πλαίσιο CSS;
Όχι. Το αποτέλεσμα είναι τυπικό CSS συν ένα απλό κουμπί HTML. Επικολλήστε το CSS στο δικό σας φύλλο στυλ και χρησιμοποιήστε την αντίστοιχη κλάση στο κουμπί.
Η Λήψη αποθηκεύει και το HTML;
Η λήψη αποθηκεύει ένα αρχείο .css με όνομα που προέρχεται από την κλάση. Αντιγράψτε τη σήμανση του κουμπιού ξεχωριστά από την καρτέλα HTML.
Μπορώ να δώσω σε κάθε γωνία διαφορετική ακτίνα;
Ναι. Στο Σχήμα, απενεργοποιήστε τη Σύνδεση όλων των γωνιών και, στη συνέχεια, ορίστε ανεξάρτητα το Πάνω αριστερά, Πάνω δεξιά, Κάτω δεξιά και Κάτω αριστερά. Αυτό το παράδειγμα τις διατηρεί συνδεδεμένες για ένα στρογγυλεμένο σχήμα.
Θα είναι το σχέδιό μου εδώ την επόμενη φορά;
Το στούντιο προσπαθεί να αποθηκεύσει το τρέχον προσχέδιο στον τοπικό χώρο αποθήκευσης αυτού του προγράμματος περιήγησης. Δεν πρόκειται για λογαριασμό ή αντίγραφο ασφαλείας μεταξύ συσκευών. Οι ρυθμίσεις του προγράμματος περιήγησης, η εκκαθάριση δεδομένων ιστότοπου ή η Επαναφορά μπορούν να το αφαιρέσουν ή να το αντικαταστήσουν, επομένως εξάγετε την εργασία που θέλετε να διατηρήσετε.
Το κουμπί μου ανεβαίνει σε διακομιστή;
Η προεπισκόπηση στυλ και η δημιουργία CSS/HTML εκτελούνται στο πρόγραμμα περιήγησής σας. Ο επεξεργαστής δεν ανεβάζει το κείμενο του κουμπιού σας ή το προσχέδιο στυλ για να δημιουργήσει την εξαγωγή.
Δώστε στο επόμενο κουμπί σας το δικό του στυλ.
Επιλέξτε ένα σημείο εκκίνησης, προσαρμόστε τις λεπτομέρειες και εισαγάγετε τον κώδικα στο έργο σας.