Δημιουργήστε κουμπιά CSS, μία λεπτομέρεια τη φορά.
Σχεδιάστε ένα κουμπί οπτικά και λάβετε το HTML και το CSS για να το χρησιμοποιήσετε στον ιστότοπό σας. Ξεκινήστε με μια προεπιλογή, προσαρμόστε την τυπογραφία, τα χρώματα, το σχήμα και τις σκιές, και στη συνέχεια κάντε προεπισκόπηση των καταστάσεων αλληλεπίδρασης πριν από την εξαγωγή.
Περιηγηθείτε στις προεπιλογές 44 στις συλλογές Everyday, Classic, Shaped, Expressive, Gradients και Elite. Κάθε προεπιλογή είναι ένα σημείο εκκίνησης που μπορείτε να επεξεργαστείτε.
Πώς οι προεπιλογές επηρεάζουν τον σχεδιασμό σας
Επιλέξτε πρώτα, μετά κάντε μικρορυθμίσεις
Χρησιμοποιήστε τη συλλογή Style για να περιορίσετε τη συλλογή. Η εφαρμογή μιας προεπιλογής αντικαθιστά τόσο τα προεπιλεγμένα στυλ όσο και τα στυλ αιώρησης (hover), διατηρώντας παράλληλα το κείμενο του κουμπιού και το όνομα της κλάσης σας.
Δοκιμάστε ένα απλό συμπαγές γέμισμα, μια στρογγυλεμένη γωνία, ένα καθαρό περίγραμμα ή μια πιο διακοσμητική επεξεργασία. Μόλις βρείτε μια κατεύθυνση, χρησιμοποιήστε τις άλλες καρτέλες για να κάνετε τις λεπτομέρειες να ταιριάζουν στη σελίδα σας.
Κάντε την ετικέτα να φαίνεται σωστή
Ορίστε το κείμενο του κουμπιού, την οικογένεια γραμματοσειρών, το μέγεθος, το πάχος, το διάστιχο, το ύψος γραμμής, τη στοίχιση και το χρώμα κειμένου. Δείτε την ετικέτα να ενημερώνεται καθώς εργάζεστε.
Μικρορυθμίσεις κειμένου και διαστημάτων
Τυπογραφία που ταιριάζει στη δράση
Το κείμενο περιέχει τα στοιχεία ελέγχου γραμματοσειράς και ένα δεύτερο πεδίο κειμένου κουμπιού. Το μέγεθος γραμματοσειράς κυμαίνεται από 10 έως 80 px· οι αναγραφόμενες οικογένειες χρησιμοποιούν γραμματοσειρές διαθέσιμες στη συσκευή του επισκέπτη.
Χρησιμοποιήστε μια σύντομη ετικέτα που περιγράφει τη δράση. Στο Fill, η οριζόντια και κάθετη εσωτερική διαμόρφωση (padding) προσθέτουν χώρο γύρω από αυτήν χωρίς να αλλάζουν το μέγεθος της γραμματοσειράς. Ελέγξτε τις μεγαλύτερες ετικέτες στη σελίδα όπου θα χρησιμοποιηθεί το κουμπί.
Επιλέξτε ένα συμπαγές ή διαβαθμισμένο γέμισμα
Χρησιμοποιήστε ένα χρώμα φόντου ή συνδυάστε δύο χρώματα με μια γραμμική διαβάθμιση. Οι επιλογείς χρωμάτων και οι εισαγωγές hex σάς επιτρέπουν να εργάζεστε οπτικά ή με ακρίβεια.
Ορίστε χρώματα και κατεύθυνση διαβάθμισης
Δύο χρώματα, μία καθαρή κατεύθυνση
Στο Fill, αλλάξτε το στυλ Fill σε Linear gradient για να αποκαλύψετε το Second color και το Gradient angle. Η γωνία κυμαίνεται από 0 έως 360 μοίρες.
Τα πεδία Hex δέχονται ένα πλήρες εξαψήφιο χρώμα ή μια τριψήφια συντομογραφία. Δοκιμάστε τη λευκή ή έγχρωμη ετικέτα και στα δύο άκρα μιας διαβάθμισης· το στούντιο δεν πιστοποιεί αυτόματα την αντίθεση του κειμένου.
Ελέγξτε το περίγραμμα και το βάθος
Προσαρμόστε τις συνδεδεμένες ή ανεξάρτητες γωνίες, το πάχος και το στυλ περιγράμματος, τις σκιές πλαισίου και τις σκιές κειμένου. Δώστε στο κουμπί ένα σχήμα που ταιριάζει στο πλαίσιό του.
Εξερευνήστε γωνίες, περιγράμματα και σκιές
Από ένα καθαρό ορθογώνιο σε ένα απαλό χάπι
Στο Shape, διατηρήστε το Link all corners ενεργοποιημένο για μια κοινή ακτίνα, ή απενεργοποιήστε το για να ορίσετε κάθε γωνία ξεχωριστά. Τα στυλ περιγράμματος περιλαμβάνουν solid, dashed, dotted, double, inset, outset, ridge, groove και none.
Στο Shadow, ορίστε οριζόντιες και κάθετες μετατοπίσεις, θόλωση, χρώμα και αδιαφάνεια. Η σκιά πλαισίου έχει επίσης spread και διακόπτη inset. Η σκιά κειμένου είναι ξεχωριστή, ώστε να μπορείτε να προσθέσετε βάθος στην ετικέτα χωρίς να αλλάξετε το περίγραμμα του κουμπιού.
Σχεδιάστε επίσης την αλληλεπίδραση
Επεξεργαστείτε τα στυλ Default και Hover ξεχωριστά. Κάντε προεπισκόπηση των εμφανίσεων Default, Hover και Active, και στη συνέχεια συγκρίνετε το κουμπί σε ανοιχτόχρωμους και σκουρόχρωμους καμβάδες.
Κατανοήστε τις καταστάσεις επεξεργασίας και προεπισκόπησης
Δύο επεξεργάσιμα στυλ, τρεις καταστάσεις προεπισκόπησης
Η κατάσταση επεξεργασίας επιλέγει ποιο στυλ αλλάζουν τα στοιχεία ελέγχου σας. Τα κουμπιά κατάστασης καμβά επιλέγουν μόνο την προεπισκόπηση. Η αιώρηση ή το πάτημα της προεπισκόπησης δείχνει επίσης την αλληλεπίδρασή της.
Οι τιμές Hover που εξακολουθούν να ταιριάζουν με την προεπιλογή ακολουθούν τις βασικές επεξεργασίες μέχρι να προσαρμοστούν. Το εξαγόμενο CSS περιλαμβάνει έναν κανόνα hover όταν χρειάζεται, ένα περίγραμμα focus-visible, μια ενεργή κίνηση και έναν κανόνα μειωμένης κίνησης.
Φέρτε το CSS στο έργο σας
Αντιγράψτε το παραγόμενο CSS και το αντίστοιχο κουμπί HTML, ή κατεβάστε ένα stylesheet. Ένα όνομα κλάσης διατηρεί τα δύο κομμάτια συνδεδεμένα.
Αντιγράψτε, κατεβάστε και διατηρήστε την εργασία σας
Απλός κώδικας που μπορείτε να χρησιμοποιήσετε απευθείας
Επιλέξτε ένα διακριτικό όνομα κλάσης, αντιγράψτε το CSS από την καρτέλα του και, στη συνέχεια, αντιγράψτε το κουμπί από το HTML. Η λήψη αποθηκεύει ένα αρχείο .css με το όνομα της κλάσης· δεν κατεβάζει μια πλήρη ιστοσελίδα.
Η προεπισκόπηση και η παραγωγή κώδικα εκτελούνται στο πρόγραμμα περιήγησής σας. Το στούντιο προσπαθεί να θυμάται ένα προσχέδιο στον τοπικό χώρο αποθήκευσης αυτού του προγράμματος περιήγησης· εξάγετε οτιδήποτε θέλετε να διατηρήσετε. Το Reset επαναφέρει το στούντιο στο αρχικό του στυλ.
Κείμενο και στυλ μέσα. HTML και CSS έξω.
Δεν απαιτείται μεταφόρτωση. Το JavaScript τροφοδοτεί τον ζωντανό επεξεργαστή στο πρόγραμμα περιήγησής σας. Αντιγράψτε το HTML και το CSS ξεχωριστά, ή κατεβάστε το stylesheet CSS. Η παραγόμενη στοίβα γραμματοσειρών χρησιμοποιεί γραμματοσειρές διαθέσιμες στη συσκευή του θεατή.
