Γεια σας, αγαπητοί φίλοι. Σήμερα θα σας πω για δύο τρόπους που θα σας βοηθήσουν να δημιουργήσετε ένα κινούμενο κουμπί για τους ιστότοπούς σας. Πιθανότατα έχετε δει πολλά από αυτά τα κουμπιά και έχετε κάνει κλικ σε αυτά. Έτσι, στο blog μου προτείνω περιοδικά μαθήματα και εκπαιδεύσεις συνεργατών, μόνο εκείνα που έχω δοκιμάσει ο ίδιος. Και φυσικά με ενδιαφέρουν τα στατιστικά στοιχεία και οι στατιστικές λένε ότι οι άνθρωποι κάνουν κλικ σε ελκυστικά κουμπιά 48% πιο συχνά από ό,τι σε κανονικούς συνδέσμους.

Η αρχή της δημιουργίας κινούμενων κουμπιών με χρήση CSS είναι η εξής: Υπάρχουν τρεις διατάξεις. 1 - Αρχικό, 2 - όταν τοποθετείτε τον κέρσορα και 3 - όταν πατάτε το κουμπί του ποντικιού. Ορισμένες υπηρεσίες έχουν και τις τρεις παροχές, ενώ άλλες έχουν μόνο δύο. Αλλά το κύριο πράγμα είναι ότι είστε ικανοποιημένοι με το τελικό αποτέλεσμα.

Εκμάθηση βίντεο σχετικά με τη δεύτερη μέθοδο δημιουργίας κινούμενων κουμπιών:

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

Ας ξεκινήσουμε λοιπόν.

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

Η πρώτη ενότητα, Text&Font, είναι υπεύθυνη για το κείμενο, το μέγεθος γραμματοσειράς, το χρώμα της γραμματοσειράς, τη σκιά γραμματοσειράς. Εδώ γράφετε την ετικέτα στο κουμπί, ορίζετε το μέγεθος, το χρώμα και τη σκιά της.

Η επόμενη ενότητα, Φόντο, αναφέρεται στο φόντο. Εδώ μπορείτε να καθορίσετε το χρώμα του κουμπιού, τη διαβάθμιση του κουμπιού, το μέγεθος του κουμπιού και το συνδυασμό φόντου.

Η ενότητα Border είναι υπεύθυνη για τη ρύθμιση της σκιάς και των περιγραμμάτων του κουμπιού. Μπορείτε να ρυθμίσετε εύκολα το πάχος του περιγράμματος, τη στρογγυλοποίηση των γωνιών και τη σκιά του κουμπιού.

Η επόμενη ενότητα, Μετασχηματισμός, είναι υπεύθυνη για τη μετατροπή του κουμπιού - περιστροφή, μετατόπιση, παραμόρφωση.

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

Αφού δοκιμάσετε αρκετές φορές, πειραματιστείτε με τις ρυθμίσεις και θα καταλάβετε τι είναι τι.

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

Επιλογές για το ποντίκι

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

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

Ιδού το παράδειγμά μας:

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

Αυτά για σήμερα, σας εύχομαι καλή επιτυχία. Και πάντα χαίρομαι που σας βλέπω στις σελίδες του ιστολογίου μου.

ΥΣΤΕΡΟΓΡΑΦΟ. Και εδώ είναι ένα παράδειγμα ενός κινούμενου κουμπιού για την εκπαίδευση του Denis Gerasimov "Ρύθμιση ψυχρής κυκλοφορίας για προώθηση συνδέσμων συνεργατών". Ολοκλήρωσα αυτήν την εκπαίδευση και τη συνιστώ σε όλους - χωρίς περιττές υπερβολές, αυτός είναι ένας πραγματικός τρόπος για να κερδίσετε χρήματα σε προγράμματα συνεργατών. Αυτό είναι βασικά αυτό που κάνω.

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

Τυπικά κουμπιά που δημιουργούνται μέσω ετικέτας ή , φαίνονται καλά, φυσικά, αλλά η προσπάθεια να αλλάξουν την εμφάνισή τους μέσα από στυλ οδηγεί σε τρομερό αποτέλεσμα. Τα κουμπιά είναι ένα νεύμα στις διεπαφές πριν από δέκα χρόνια με τη γωνιότητά τους (Εικ. 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.

• Μετάφραση

Γεια σου, αγαπητέ habrafriend! Σήμερα θα μάθουμε πώς να δημιουργούμε κουμπιά CSS3 3D! Βασίζονται στο δημοφιλές Freebie PSD του Orman Clark για τον ιστότοπο Premium Pixels του. Θα προσπαθήσουμε να αντιγράψουμε αυτά τα κουμπιά χρησιμοποιώντας CSS με ελάχιστο κώδικα HTML.

Βήμα 1:Δημιουργήστε ένα έγγραφο HTML

Θα ξεκινήσουμε δημιουργώντας ένα νέο έγγραφο HTML. Θα βασίζεται στο boilerplate HTML5 ώστε να έχουμε ένα εύκολο σημείο εκκίνησης. Τώρα θα προσθέσουμε μια λίστα με συνδέσμους. Αυτό είναι βασικά, χάρη στο CSS3 που δεν χρειάζεται να χρησιμοποιεί πρόσθετα div και διαστήματα.
Θα αντιστοιχίσουμε μια κλάση 'κουμπιά' σε κάθε στοιχείο λίστας. Και επειδή ο Orman χρησιμοποιούσε διαφορετικά χρώματα, θα εκχωρήσουμε σε κάθε κουμπί το δικό του χρώμα ως κατηγορία.

• Κατεβάστε
• Κατεβάστε
• Κατεβάστε
• Κατεβάστε
• Κατεβάστε
• Κατεβάστε
• Κατεβάστε
• Κατεβάστε
• Κατεβάστε
• Κατεβάστε

Αυτό είναι το μόνο που χρειαζόμαστε σε αυτή τη φάση.

Βήμα 2:Βασικοί κανόνες CSS

Πριν μπείτε σε κλίσεις, στρογγυλεμένες γωνίες κ.λπ., υπάρχουν ορισμένοι βασικοί κανόνες που πρέπει να προσέξετε. Τίποτα το ιδιαίτερο, απλά κανονικό CSS2:

Ul ( στυλ λίστας: κανένα; ) a.button ( οθόνη: μπλοκ; αιώρηση: αριστερά; θέση: σχετική; ύψος: 25 εικονοστοιχεία; πλάτος: 80 εικονοστοιχεία; περιθώριο: 0 10 εικονοστοιχεία 18 εικονοστοιχεία 0; διακόσμηση κειμένου: κανένα; γραμματοσειρά: 12 εικονοστοιχεία" Helvetica Neue", Helvetica, Arial, sans-serif; βάρος γραμματοσειράς: έντονη γραφή, ύψος γραμμής: 25 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; )
Τώρα ας εφαρμόσουμε τους κανόνες για διαφορετικά χρώματα. Για παράδειγμα, για το γκρι. Όλα τα άλλα χρώματα μπορούν να προβληθούν στην επίδειξη.
/* ΓΚΡΙ */ .γκρι, .γκρι:hover ( χρώμα: #555; περίγραμμα-κάτω: 4px συμπαγές #b2b1b1; φόντο: #eee; .γκρι:hover ( φόντο: #e2e2e2; ) )
Θα πρέπει να καταλήξεις σε κάτι τέτοιο. Φαίνεται αρκετά σταθερό, αν είναι το 2008.

Βήμα 3:Διπλά κάδρα!

Αν κοιτάξετε προσεκτικά το τελικό αποτέλεσμα, θα δείτε ότι υπάρχει μια λεπτή γραμμή γύρω από την περίμετρο ολόκληρου του κουμπιού. Για να πετύχουμε αυτό το αποτέλεσμα θα χρησιμοποιήσουμε ψευδοστοιχεία :πρινΚαι :μετά.
a.button ( οθόνη: block; float: αριστερά; θέση: σχετική; ύψος: 25px; πλάτος: 80px; περιθώριο: 0 10px 18px 0; text-decoration: none; γραμματοσειρά: 12px "Helvetica Neue", Helvetica, Arial, sans -Σειρά γραμματοσειράς: έντονη γραμμή: 25 εικονοστοιχεία: a.button:after (περιεχόμενο: ""; αριστερό: 25px; ; πλάτος: 80 px;
Προσθέτοντας χρώμα τα κουμπιά φαίνονται πολύ καλύτερα.
/* ΓΚΡΙ */ .γκρι, .γκρι:hover ( χρώμα: #555; περιθώριο-κάτω: 4px συμπαγές #b2b1b1; φόντο: #eee; ) .γκρι:πριν, .γκρι:μετά ( περίγραμμα: 1px συμπαγές #cbcbcb; περίγραμμα-κάτω: 1px συμπαγές #a5a5a5 .grey:hover ( φόντο: #e2e2e2; )

Βήμα 4:Λίγη μαγεία CSS3

Τώρα ας πάμε στο πραγματικό τμήμα CSS3. Ας ξεκινήσουμε με στρογγυλεμένες γωνίες:
a.button ( οθόνη: block; float: αριστερά; θέση: σχετική; ύψος: 25px; πλάτος: 80px; περιθώριο: 0 10px 18px 0; text-decoration: none; γραμματοσειρά: 12px "Helvetica Neue", Helvetica, Arial, sans -σερίφ, βάρος γραμματοσειράς: ύψος γραμμής: 25 εικονοστοιχεία - κιτ-περιθώριο: 3 εικονοστοιχεία.
Φυσικά στοιχεία :πρινΚαι :μετάχρειάζονται επίσης στρογγυλεμένες γωνίες.
a.button:before, a.button:after ( περιεχόμενο: ""; θέση: απόλυτη; αριστερά: -1px; ύψος: 25px; πλάτος: 80px; κάτω: -1px; -webkit-border-radius: 3px; -moz -border-radius: 3px; border-radius: 3px ) a.button:before (ύψος: 23px; bottom: -4px; border-radius: 0 0 3px 3px; -moz-; border-radius: 0 0 3px 3px: 0 0 3px 3px -webkit-box-shadow: 0 1px ;
Τέλος θα εφαρμόσουμε ντεγκραντέ, εσωτερική σκιά και σκιά κειμένου. Για να αποφύγουμε σφάλματα στον IE6, ας προσθέσουμε το state:visited.
/* ΓΚΡΙ */ a.gray, a.gray:hover, a.grey:visited ( χρώμα: #555; περίγραμμα-κάτω: 4px συμπαγές #b2b1b1; text-shadow: 0px 1px 0px #fafafa; φόντο: #eee; φόντο: -webkit-gradient(linear, αριστερό πάνω, αριστερό κάτω, from(#eee), to (#e2e2e2) background: -moz-linear-gradient(top, #eee, #e2e2e2); #f5f5f5; αριστερά επάνω, αριστερό κάτω, από(#e2e2e2), to(#eee) φόντο: -moz-linear-gradient(top, #e2e2e2, #eee )
Το τελικό μας αποτέλεσμα δεν είναι και πολύ κακό!

Βήμα 5:Ξεχάσαμε τίποτα;

Ο Orman συμπεριέλαβε επίσης την:ενεργή κατάσταση στο σχέδιό του. Επομένως, πρέπει απλώς να το προσθέσουμε στον κώδικά μας.
Θα τοποθετήσουμε αυτό το μέρος του κώδικα κάτω από τους κανόνες για τα διαφορετικά χρώματα.
/* ACTIVE STATE */ a.button:active ( border: none; bottom: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, inset 0 1px rgba(0, 0, 0, 0.3); -box-shadow: κανένας -moz-box-shadow: κανένας;
Αυτό είναι αυτό που παίρνουμε:

Βήμα 6 (προαιρετικό):Παλιά προγράμματα περιήγησης

Έτσι, δημιουργήσαμε μερικά ωραία κουμπιά CSS3 που λειτουργούν σε όλα τα σύγχρονα προγράμματα περιήγησης. Τι γίνεται όμως με τον Internet Explorer 8 και παρακάτω; Αυτά τα προγράμματα περιήγησης δεν υποστηρίζουν σκιές κειμένου ή διαβαθμίσεις.
Για να λύσουμε αυτό το πρόβλημα, μπορούμε να χρησιμοποιήσουμε τη βιβλιοθήκη javascript Modernizr, η οποία μπορεί να εντοπίσει εάν το πρόγραμμα περιήγησής σας υποστηρίζει CSS3 και HTML5. Η βιβλιοθήκη δεν διορθώνει το πρόβλημα, απλώς προσφέρει ένα εναλλακτικό στυλ.
Αρχικά, θα δημιουργήσουμε τη δική μας έκδοση του Modernizr για να μην φέρουμε ένα τεράστιο javascript. Αυτό μπορεί να γίνει στον ιστότοπό τους. Αφού εισαγάγουμε τη javascript στο έγγραφό μας, πρέπει να ορίσουμε διαφορετικούς κανόνες κλάσης για το εναλλακτικό στυλ. Θα χρησιμοποιήσουμε εικόνες για τα προγράμματα περιήγησης που δεν υποστηρίζουν ακτίνα περιγράμματος και διαβαθμίσεις.
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedtontetton a. .no-generatedcontent a.button:visited ( φόντο: url(images/sprite.png) no-repeat 0 0px; ύψος: 32px; πλάτος: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generatedcontent a.button:hover ( φόντο: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button:active, .no-borderradius a.button :active, .no-generatedcontent a.button:active ( φόντο: url(images/sprite.png) no-repeat 0 -64px; bottom: 0; line-height: 35px; ) .no-cssgradients a.gray, . no-cssgradients a.grey:visited, .no-cssgradients a.gray:hover ( background-position-x: 0; ) .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover ( background-position-x: -82px; ) .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover ( background-position-x: -164 px; ) .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover ( background-position-x: -246px; ) .no-cssgradients a.turquoise, .no- cssgradients a.turquoise:visited, .no-cssgradients a.turquoise:hover ( background-position-x: -328px; ) .no-cssgradients a.black, .no-cssgradients a.black:visited, .no-cssgradients a .black:hover ( background-position-x: -410px; ) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover ( background-position-x: - 492px ) .no-cssgradients a.yellow, .no-cssgradients a.yellow:visited, .no-cssgradients a.yellow:hover (background-position-x: -574px; ). , .no-cssgradients a.purple:hover ( background-position-x: -656px; ) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no- cssgradients a.darkblue:hover ( φόντο -position-x: -738 px; cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button :before, .no-borderradius a .button:after, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before , .no-generatedcontent a. :after ( περίγραμμα: 0; )

συμπέρασμα

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