Έτοιμα κουμπιά css. Εύκολα στυλ και εφέ για κουμπιά

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

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

1. Super Awesome Κουμπιά.

Αυτό το σετΤα κουμπιά χρησιμοποιούν ένα σετ css3 και επίσης χρωματισμό RGBA.

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

Παράδειγμα σύνδεσης:

Super Awesome Button" Υπέροχο μπλε κουμπί" Φοβερό ματζέντα κουμπί" Υπέροχο κόκκινο κουμπί" Φοβερό πορτοκαλί κουμπί" Υπέροχο κίτρινο κουμπί"

2. Κουμπιά Google.

Αυτά τα κουμπιά βασίστηκαν σε αρχική σελίδα Google.com. Είναι επίσης απλά και μινιμαλιστικά.

Παράδειγμα σύνδεσης:

Αναζήτηση στο Google Αισθάνομαι τυχερός

3. Κουμπιά διαβάθμισης CSS3.

Τα κουμπιά μοιάζουν πολύ με τα Super Awesome Buttons που αναφέρθηκαν παραπάνω. Αυτό το σετ διατίθεται σε πολλά χρώματα (9 χρώματα) και διάφορα σχήματα.

Παράδειγμα σύνδεσης:

Ορθογώνιο ή Στρογγυλεμένο Μπορεί να είναι Μεσαίο ή Μικρό Ετικέτα κουμπιού Σπιθαμή

H3

4. Κουμπί Kick-Ass CSS3.

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

5. Καθαρά εικονίδια μέσων κοινωνικής δικτύωσης CSS.

Αυτό το σετ είναι ένα πακέτο εικονιδίων κοινωνικά δίκτυα, αντί για κουμπιά. Το σύνολο αντιπροσωπεύεται από δέκα εικονίδια κοινωνικών δικτύων, συμπεριλαμβανομένων των Facebook, Twitter, Flickr και άλλων.

Παράδειγμα σύνδεσης:

• Facebook
• Κελάδημα
• RSS
• Flickr
• Νόστιμο
• LinkedIn
• Google
• Orkut
• Τεχνοράτη
• NetVibes

6. Εξαιρετικά φανταχτερά κουμπιά CSS3.

Όλοι οι κάτοχοι συσκευών iOS αναμφίβολα θα αναγνωρίσουν αυτά τα κουμπιά παρόμοια κουμπιά υπάρχουν σε συσκευές iOS από τις πρώτες εκδόσεις. Αυτά τα κουμπιά, όπως πολλά που παρουσιάζονται εδώ, έχουν ρυθμίσεις χρώματος και μεγέθους και είναι κατασκευασμένα σε καθαρό css3.

Παράδειγμα σύνδεσης:

Θέση

7. BonBon: Γλυκά κουμπιά CSS3.

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

Παράδειγμα σύνδεσης:

Επιγραφή

8. Κουμπιά CSS3 με ρεαλιστική εμφάνιση.

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

Παράδειγμα σύνδεσης:

Σπρώξτε

9. Απλά κουμπιά CSS3 Github.

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

Παράδειγμα σύνδεσης:

Αυτό είναι ένα κουμπί Αυτό είναι ένα κουμπί χαπιού Διαίρεση με το μηδέν

10. Ευέλικτα κουμπιά εναλλαγής CSS3.

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

Παράδειγμα σύνδεσης:

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

Επίδειξη Ι

Κώδικας HTML για κουμπιά

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

Κουμπί :φτερουγίζω :ενεργός Κουμπί :φτερουγίζω :ενεργός Κουμπί :φτερουγίζω :ενεργός Κουμπί :φτερουγίζω :ενεργός

Στυλ CSS για όλα τα κουμπιά

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

Κουμπί ( οθόνη: inline-block; περιθώριο: 0 10px 0 0; padding: 15px 45px; μέγεθος γραμματοσειράς: 48px; γραμματοσειρά-οικογένεια: "Bitter",serif; ύψος γραμμής: 1,8; εμφάνιση: κανένα; box-shadow: κανένα;

Δεν είναι καθόλου δύσκολο. Λοιπόν, τώρα ας ρίξουμε μια πιο προσεκτική ματιά σε καθένα από τα 4 στυλ των κομψών κουμπιών μας.

Επίπεδα κουμπιά γεμάτα με φόντο

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

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

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

Section.flat button ( color: #fff; background-color: #6496c8; text-shadow: -1px 1px #417cb8; border: none; ) section.flat button:hover, section.flat button.hover ( background-color: #346392; σκιά κειμένου: -1 εικονοστοιχείο 1 εικονοστοιχείο #27496δ;

Κουμπιά στυλ με περιθώρια ή περιγράμματα

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

Και ως συνήθως ο κώδικας CSS είναι πολύ απλός, απλώς προσθέτουμε κανόνες για να εμφανίζεται το περίγραμμα:

Κουμπί Section.border ( χρώμα: #6496c8; φόντο: rgba(0,0,0,0); περίγραμμα: συμπαγές 5px #6496c8; ) button section.border:hover, section.border button.hover ( border-color: # 346392; χρώμα: #346392;

Κουμπιά με σκιά και ντεγκραντέ σε CSS

Αυτό το στυλ κουμπιών μπορεί εύκολα να ονομαστεί ξεπερασμένο, αλλά ακόμη και τώρα μπορεί να το βρει κανείς στο Διαδίκτυο. Εάν αυτά τα κουμπιά ταιριάζουν στο στυλ του ιστότοπού σας, τότε είναι μόνο για εσάς. Είναι επίσης πολύ εύκολο να γίνουν, εδώ είναι μια εικόνα:

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

Κουμπί Section.gradient ( χρώμα: #fff; text-shadow: -2px 2px #346392; background-color: #ff9664; background-image: linear-gradient(top, #6496c8, #346392); box-shadow: inset 0 0 0 1px #27496d; κανένας; κουμπί section.gradient:active, section.gradient button.active ( box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; )

Κομψό εφέ κλικ

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

Το CSS εδώ είναι λίγο πιο περίπλοκο και απαιτεί λίγο μαθηματικά. Αυτό όμως μπορεί να γίνει εύκολα κατανοητό. Γενικά, δεν είναι και τόσο τρομακτικό. Θα τοποθετήσουμε μια μη θολή σκιά κάτω από το κουμπί έτσι ώστε να δίνει το εφέ ενός κουμπιού 3D ή να φαίνεται να προεξέχει λίγο. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα κουμπιά, θα κάνουμε το φόντο πιο σκούρο. Και όταν ο χρήστης κάνει κλικ στο κουμπί, θα αλλάξουμε τη θέση του ίδιου του κουμπιού στα στυλ. Και για να φαίνονται όλα πιο εντυπωσιακά και ομαλά, θα προσθέσουμε έναν μετασχηματισμό CSS3 (translateY). Με αυτόν τον τρόπο το κουμπί θα μετακινηθεί ομαλά προς τα κάτω. Και εδώ είναι ο ίδιος ο κώδικας CSS:

Section.press button ( color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d; ) section.press button:hover, section.press button.hover ( χρώμα φόντου: #417cb8 ) section.press button:active, section.press button.active ( background-color: #417cb8; box-shadow: 0 5px #27496d; transform: translateY(5px); )

Επίδειξη Ι

συμπέρασμα

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

Βλαντ Μέρζεβιτς

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

Ρύζι. 1. Πρωτότυπο και τροποποιημένο κουμπί

Για να αλλάξετε ριζικά την εμφάνιση ενός κουμπιού, μπορείτε να χρησιμοποιήσετε εικόνες, αλλά σε σύγκριση με Δυνατότητες CSS 3 αυτή η επιλογή φαίνεται πλέον εγχώρια.

Θα πάρω ως βάση το αρχικό κουμπί στο πρόγραμμα περιήγησης, το οποίο περιέχει μια γραμμική κάθετη κλίση και στρογγυλεμένες άκρες.

Ο ευκολότερος τρόπος για να στρογγυλοποιήσετε τις γωνίες είναι να χρησιμοποιήσετε την ιδιότητα border-radius, δίνοντάς της την επιθυμητή ακτίνα στρογγυλοποίησης. Ως συνήθως, δεν λειτουργεί σε όλα τα προγράμματα περιήγησης, επομένως θα πρέπει να προσθέσετε το πλήρες σετ. Το αποτέλεσμα είναι το εξής.

Moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */

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

Ρύζι. 2. Κουμπιά με στρογγυλεμένες γωνίες

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

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

φόντο: -moz-linear-gradient(#00BBD6, #EBFFFF);

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

Chrome, Safari

φόντο: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to (#EBFFFF));

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

Internet Explorer

φίλτρο: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");

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

Η όπερα ξεκουράζεται.

Συγκεντρώνουμε όλες τις ιδιότητες για προγράμματα περιήγησης, γωνίες και διαβαθμίσεις (παράδειγμα 1).

Παράδειγμα 1. Κουμπιά με γραμμική κλίση

Κουμπί αφετηρίας

Νέο κουμπί

Αποδείχθηκε αρκετά ωραίο (Εικ. 3), αλλά υπάρχουν επίσης εμφανείς διαφορές από το αρχικό κουμπί - φαίνεται επίπεδο, σαν σανίδα.

Ρύζι. 3. Προβολή κουμπιού με κλίση

Κάντε ένα κουμπί το επιθυμητό σχήμαΜπορείτε να χρησιμοποιήσετε ξανά μια κλίση, «παίζοντας» με τα χρώματα. Δύο τιμές ντεγκραντέ δεν είναι πλέον αρκετές, ευτυχώς ο Firefox και το Safari προσφέρουν μια λύση.

φόντο: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

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

Chrome, Safari

φόντο: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to (#D0ECF4), color-stop(0.5, #5BC9E1));

Η παράμετρος color-stop καθορίζει το σημείο στο οποίο θα εφαρμοστεί το νέο χρώμα. Η τιμή κυμαίνεται από 0 έως 1.

Παράδειγμα 2: Κουμπιά με βελτιωμένη κλίση

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

Κουμπί αφετηρίας

Νέο κουμπί

Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 4.

Ρύζι. 4. Κλίση, τι είδους κλίση χρειάζεται

Ομοίως, μπορείτε να δημιουργήσετε οποιεσδήποτε άλλες διαβαθμίσεις σε ένα κουμπί ή άλλο στοιχείο (Εικ. 5). Αλλά κάντε το μόνοι σας, γι' αυτό το πρόσθεσα στο εργαστήριο.

Ρύζι. 5. Τόσο διαφορετικά κουμπιά

Επιτρέψτε μου να συνοψίσω. Μπορείτε να δημιουργήσετε ένα κουμπί με κλίση και στρογγυλεμένες γωνίες χωρίς εικόνες. Ωστόσο, υπάρχει σύγχυση και αμφιταλαντεύσεις με τα προγράμματα περιήγησης. Η Opera δεν μπορεί να λειτουργήσει καθόλου με ντεγκραντέ στον IE 9 υπάρχει ένα δυσάρεστο σφάλμα όταν συνδυάζεται μια κλίση με γωνίες (Εικ. 6).

Ρύζι. 6. Επικάλυψη φόντου στις γωνίες στο IE 9

Λοιπόν, προς το παρόν θα φτιάξουμε "όμορφα πράγματα". Προγράμματα περιήγησης Firefox, Safari και Chrome.

Πρώτα πρέπει να κατεβάσετε τις πηγές και να επιλέξετε ένα θέμα σχεδίασης για τα κουμπιά. Μπορείτε να επιλέξετε το σχέδιο που σας αρέσει. Για παράδειγμα, ας πάρουμε το πρώτο θέμα, winona.

Κατεβάστε

Παρόμοια άρθρα για αυτό το θέμα:

Ανοίξτε το αρχείο στο πρόγραμμα επεξεργασίας index.htmlαπό την πηγή, βρίσκουμε την ετικέτα που μας ενδιαφέρει. Στην περίπτωσή μου:

Από αυτόν τον κώδικα παίρνουμε μια γραμμή με την κλάση κουμπί.

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

Αντιγράψτε το και επικολλήστε το ανάμεσα στις ετικέτες V αρχείο ευρετηρίουτου έργου σας.

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

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

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

Σε αυτό το άρθρο θα καλύψουμε διάφορους τρόπους δημιουργίας CSS κουμπιών. Αλλά η κατανόηση της διαφοράς μεταξύ Flat UI και Σχεδιασμός Υλικούδεν έχει νόημα αν δεν ξέρετε ποια εξαρτήματα να χρησιμοποιήσετε. Ας δούμε γρήγορα τα βασικά της δημιουργίας κουμπιών με χρήση CSS.

Βασικά κουμπιά CSS

Υπάρχουν πολλά "μη τεχνικά" πρότυπα κουμπιών:

1. Η διαθεσιμότητα είναι υψίστης σημασίας. Χρήστες με αναπηρίεςκαι τα παλαιότερα προγράμματα περιήγησης θα πρέπει να έχουν εύκολη πρόσβαση στα κουμπιά.
2. Απλό κείμενο – γράψτε απλό και σύντομο κείμενο στα κουμπιά. Οι χρήστες θα πρέπει να κατανοήσουν αμέσως τον σκοπό του κουμπιού και πού θα τους οδηγήσει.

Σχεδόν όλα τα κουμπιά στο Διαδίκτυο χρησιμοποιούν εφέ που αλλάζουν το χρώμα των πλαισίων και των σκιών. Αυτό μπορεί να γίνει χρησιμοποιώντας ψευδοκλάσεις. Θα επικεντρωθούμε σε δύο από αυτά: :hover και :active . Η ψευδο-κλάση :hover είναι υπεύθυνη για τη συμπεριφορά αιώρησης CSS. Ο κωδικός είναι :active όταν ο χρήστης έχει πατήσει το κουμπί του ποντικιού αλλά δεν τον έχει ακόμη αφήσει.

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

Χρώμα

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

1. Συνδυασμοί χρωμάτων– χρησιμοποιήστε χρώματα που αλληλοσυμπληρώνονται. Colorhexa– ένα εξαιρετικό εργαλείο για την εύρεση ταιριασμένων χρωμάτων.
2. Συμμόρφωση με την παλέτα- αν ψάχνετε για χρωματική παλέτα, μεταβείτε στο lolcolors.

Σκιές

Με το box-shadow μπορείτε να προσθέσετε μια σκιά γύρω από ένα αντικείμενο. Αυτή η ιδέα εφαρμόζεται στο Flat UI και στο Material Design. Μπορείτε να διαβάσετε περισσότερα για την ιδιότητα box-shadow στο MDN.

Ομαλός χρόνος μετάβασης

Η ιδιότητα μετάβασης-διάρκειας προσθέτει ένα χρονικό πλαίσιο Αλλαγές CSS. Τα στυλ κουμπιών χωρίς ομαλή μετάβαση αλλάζουν αμέσως σε στυλ της ψευδο-κλάσης :hover, κάτι που μπορεί να αποθαρρύνει τον χρήστη. Στο παρακάτω παράδειγμα, το στυλ του κουμπιού αλλάζει ομαλά (σε 0,5 δευτερόλεπτα): σε :hover:

Αλλαγή χρώματος ( ακτίνα περιγράμματος: 5 εικονοστοιχεία, μέγεθος γραμματοσειράς: 20 εικονοστοιχεία, συμπλήρωση: 14 εικονοστοιχεία, 80 εικονοστοιχεία, δρομέας: δείκτης, χρώμα: #fff, χρώμα φόντου: #00A6FF, μέγεθος γραμματοσειράς: 1,5 εκ., οικογένεια γραμματοσειράς: "Roboto "; βάρος γραμματοσειράς: 100; περίγραμμα: 1 εικονοστοιχείο συμπαγές #fff; πλαίσιο-σκιά: 2 εικονοστοιχεία 2 εικονοστοιχεία 5 εικονοστοιχεία #AFE9FF; διάρκεια μετάβασης: 0,5 δευτ.; -webkit-transition-duration: 0,5 δευτ. s;

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

Δείτε παράδειγμα

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

μετάβαση-διάρκεια: 0,5 δευτ. /* Τακτική είσοδος, λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης*/ -webkit-transition-duration: 0,5s; /* Βοηθά μερικούς εκδόσεις σαφάρι, chrome και android */ -moz-transition-duration: 0,5s; /* για firefox */

Επαναφορά στυλ κουμπιών

Για να ορίσει το πρόγραμμα περιήγησης μια προεπιλεγμένη τιμή για το στυλ κουμπιού CSS , μπορείτε να ορίσετε προσαρμοσμένα στυλ:

button.your-button-class ( -webkit-appearance: none; -moz-appearance: none; )

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

Τρία στυλ κουμπιών

1 – Απλό ασπρόμαυρο

Δείτε παράδειγμα

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

Ας δούμε τον κώδικα για ένα μαύρο κουμπί με λευκό φόντο. Για να βάψετε ξανά ένα κουμπί σε διαφορετικό χρώμα, αλλάξτε το κουμπί Στυλ CSSόλες οι τιμές λευκού και μαύρου ανταλλάσσονται:

Suit_and_tie ( χρώμα: λευκό; μέγεθος γραμματοσειράς: 20 px; γραμματοσειρά-οικογένεια: helvetica; κείμενο-διακόσμηση: κανένα; περίγραμμα: 2 εικονοστοιχεία συμπαγές λευκό; περίγραμμα-ακτίνα: 20 px; μετάβαση-διάρκεια: .2 δευτ.; -webkit-transition-duration: 0.2s; -moz-transition-duration: .2s; -διάρκεια: 0,2 δευτ. -moz-transition-duration: 2s )

Στα παραπάνω στυλ, μπορείτε να δείτε ότι οι ιδιότητες γραμματοσειράς και χρώματος φόντου αλλάζουν τις τιμές τους με την ιδιότητα transition-duration.2s. Μπορείτε να πάρετε τα χρώματα των αγαπημένων σας εμπορικών σημάτων και να δημιουργήσετε το δικό σας κουμπί. Τα χρώματα της μάρκας βρίσκονται στο BrandColors.

2- Επίπεδα κουμπιά διεπαφής χρήστη

Το Flat UI εστιάζει στον μινιμαλισμό στο κουμπί HTML CSS – περισσότερη δράση, λιγότερη κίνηση. Συνήθως αλλάζω από τα ασπρόμαυρα κουμπιά σε Flat UI όταν το έργο μου αρχίζει να διαμορφώνεται. Τα επίπεδα κουμπιά διεπαφής χρήστη έχουν μινιμαλιστική εμφάνιση και ταιριάζουν στα περισσότερα σχέδια.

Ας βελτιώσουμε το κουμπί μας προσθέτοντας κίνηση σε αυτό για να προσομοιώσουμε ένα εφέ 3D.

Δείτε παράδειγμα

Θα δούμε το πρώτο κουμπί:

Τιρκουάζ ( περιθώριο-δεξιά: 10 εικονοστοιχεία; πλάτος: 100 εικονοστοιχεία; φόντο: #1abc9c; περιθώριο-κάτω: #16a085 3 εικονοστοιχεία συμπαγές; περίγραμμα-αριστερά: #16a085 1 εικονοστοιχείο συμπαγές; περίγραμμα-δεξιά: #16a085 1 εικονοστοιχείο συμπαγές; ακτίνα περιγράμματος: 6 px; text-align: padding: 12px font-weight: 0.8 -align: white; 10px: 3px.

Το κουμπί CSS έχει τρεις καταστάσεις: κανονική, :hover και :active.

Το :hover περιέχει μόνο μία γραμμή κώδικα για να μειώσει την αδιαφάνεια για να γίνει το κουμπί λίγο πιο ανοιχτό, ώστε να μην χρειάζεται να επιλέξουμε πιο ανοιχτό χρώμα.

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

Η ψευδο-κλάση :active χρησιμοποιείται συχνά στα κουμπιά Flat UI. Όταν το κουμπί μας γίνει:active συμβαίνουν δύο πράγματα:

1. Το :border-bottom αλλάζει από 3px σε 1px. Η σκιά κάτω από το κουμπί μειώνεται και το κουμπί μετακινείται προς τα κάτω μερικά pixel. Αυτή η αλλαγή επιτρέπει στο χρήστη να αισθάνεται ότι έχει πατήσει ένα κουμπί.
2. Το χρώμα του φόντου σκουραίνει, προσομοιώνοντας την κίνηση του κουμπιού μακριά από τον χρήστη και προς την οθόνη. Κάτι που επίσης υπενθυμίζει στον χρήστη ότι έχει πατήσει το κουμπί.

Το Flat UI εκτιμά τις μινιμαλιστικές κινήσεις κουμπιών, " λέγοντας μια μεγάλη ιστορία" Πολλοί άνθρωποι προσομοιώνουν μια μετατόπιση κουμπιού χρησιμοποιώντας το :border-bottom . Αξίζει να σημειωθεί ότι στο Flat UI υπάρχουν κουμπιά που δεν κινούνται καθόλου, αλλά αλλάζουν μόνο χρώμα.

Σχεδιασμός Υλικού

Το Material Design είναι μια προσέγγιση σχεδιασμού που προωθεί την ιδέα της μεταφοράς πληροφοριών με τη μορφή καρτών διάφορα κινούμενα σχέδιανα τραβήξει την προσοχή. Η Google αναφέρεται στη σελίδα Αρχική σελίδα Material Designτρεις βασικές αρχές:

• Η λέξη "Υλικό" είναι μια μεταφορά.
• Μονοτονία, γραφικά, επιθετικότητα.
• Η κίνηση μεταφέρει νόημα.

Για να κατανοήσουμε καλύτερα αυτές τις τρεις αρχές, ας ρίξουμε μια ματιά στο Material Design στην πράξη:

Δείτε παράδειγμα

Αυτά τα κουμπιά CSS υλοποιούν δύο κύριες ιδέες - την ιδιότητα box-shadow και την ιδιότητα Polymer.

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

ΥΠΟΒΑΛΛΟΥΝ

/* αυτή η γραμμή προσθέτει το εφέ */

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

Τώρα ας μιλήσουμε για τον κώδικα CSS που εφαρμόζει τις αρχές του Material Design:

σώμα ( χρώμα φόντου: #f9f9f9; γραμματοσειρά-οικογένεια: RobotoDraft, "Helvetica Neue"; ) /* Κουμπί */ .button ( οθόνη: inline-block; θέση: σχετική; πλάτος: 120 px; ύψος: 32 px; ύψος γραμμής : 32px, μέγεθος γραμματοσειράς: 0,9em; 0, 0, 0, 0,2 μετάβαση-καθυστέρηση: 0s ) /* Διάφορα * / .button.grey ( background-color: #eee; ) .button.blue (color-background: #4285f4); ; ) .button.green (χρώμα φόντου: #0f9d58; χρώμα: #fff; ) .center (στοίχιση κειμένου: κέντρο; )

Όλα τα κουμπιά CSS χρησιμοποιούν την ιδιότητα box-shadow. Ας αφαιρέσουμε όλο τον αμετάβλητο κώδικα CSS και ας δούμε πώς λειτουργεί το box-shadow:

Κουμπί ( μετάβαση: 0,2 δευτ.; μετάβαση-καθυστέρηση: 0,2 δευτ.; πλαίσιο-σκιά: 0 2 εικονοστοιχεία 5 εικονοστοιχεία 0 rgba(0, 0, 0, 0,26); ) .κουμπί:ενεργό (καθυστέρηση μετάβασης: 0 δευτ.; σκιά κουτιού: 0 8 εικονοστοιχεία 17 εικονοστοιχεία 0 rgba(0, 0, 0, 0,2 )

Η ιδιότητα box-shadow χρησιμοποιείται σε στυλ CSS κουμπιών για να προσθέσετε μια λεπτή, σκοτεινή σκιά στα αριστερά και στο κάτω μέρος κάθε κουμπιού. Όταν πατηθεί, η σκιά μεγεθύνεται ελαφρώς και γίνεται πιο ανοιχτή. Αυτή η κίνηση προσομοιώνει το εφέ μιας τρισδιάστατης σκιάς που φαίνεται να αναπηδά από τη σελίδα στον χρήστη. Το αποτέλεσμα περιγράφεται στο Στυλ υλικώνΟ σχεδιασμός και οι αρχές του.