Μοντέρνα στυλ css για κουμπιά. Πώς να δημιουργήσετε κομψά κουμπιά χρησιμοποιώντας καθαρό CSS

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

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

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

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

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

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

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

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

Έχω επιλέξει μερικά κουμπιά CSS που νομίζω ότι μπορούν να χρησιμοποιηθούν σε έργα web.

Γεννήτρια κουμπιών CSS3

Κοιτάξτε τη γεννήτρια Κουμπιά CSS3 από τη Sanwebe:

Ροζ κουμπί CSS3 με γραμματοσειρά Pacifico

Χαριτωμένο ροζ κουμπί ( εκτός από λίγο κώδικα jQuery για αναπαραγωγή μουσικής και αλλαγή του εσωτερικού κειμένου) δημιουργείται πλήρως με βάση το CSS3:

Συλλογή τρισδιάστατων κουμπιών

Συλλογή τρισδιάστατων κουμπιών που δημιουργήθηκαν με CSS3:

Κοινωνικά 3D κουμπιά

Υπέροχα κουμπιά κοινωνικής δικτύωσης φτιαγμένα με CSS3 και γραμματοσειρά εικονιδίων:

Κινούμενα κουμπιά CSS3

Κινούμενα κουμπιά CSS με μοτίβα φόντου. Μπορεί να μην λειτουργεί σε προγράμματα περιήγησης Firefox 3.6 και IE10:

Στρογγυλά κινούμενα κουμπιά CSS3

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

Κουμπιά καθαρού κύκλου

Ακολουθεί ένα άλλο παράδειγμα στρογγυλών κουμπιών CSS3:

Κουμπιά εναλλαγής στο CSS3

Καλά εκτελεσμένα κουμπιά επιλογής που δημιουργήθηκαν με CSS3 και μια γραμματοσειρά εικονιδίων:

Κινούμενο κουμπί CSS3

Χαριτωμένο κουμπί 3D που δημιουργήθηκε με γραμματοσειρές CSS3 και Google:

Εφέ κουμπιών CSS3

Αυτά τα κουμπιά παρουσιάζουν κινούμενα σχέδια χρησιμοποιώντας διάφορες ιδιότητες CSS3:

Γυαλιστερά κουμπιά CSS3

Τώρα μπορείτε να είστε απολύτως σίγουροι ότι τα γυαλιστερά κουμπιά μπορούν εύκολα να δημιουργηθούν χρησιμοποιώντας CSS3, όχι άλλο Photoshop:

Τρισδιάστατα κουμπιά CSS3

Είναι εκπληκτικό τι μπορείτε να κάνετε με τα ψευδοστοιχεία CSS3 :before και :after. Δείτε τα εκπληκτικά 3D κουμπιά:

Διακόπτης CSS3

Παράδειγμα κουμπιού εναλλαγής στο CSS3 χωρίς χρήση JavaScript:

Τρισδιάστατο εφέ κουμπιού αναστροφής

Τρισδιάστατο εφέ αναστροφής στο κλικ του κουμπιού που δημιουργήθηκε με το CSS3:

Κουμπιά μάρκας

Όμορφα κουμπιά CSS από δημοφιλείς μάρκες που χρησιμοποιούν εικονίδια bootstrap:

Σκούρο στρογγυλό κουμπί

Στρογγυλό κουμπί χρησιμοποιώντας jQuery για να δώσει ένα εφέ πτώσης όταν κάνετε κλικ στο κουμπί:

Διακόπτης CSS3

Διακόπτης που δημιουργήθηκε με CSS3:

Όμορφα επίπεδα κουμπιά

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

Κουμπιά κοινής χρήσης κοινωνικών δικτύων

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

Κουμπί Χριστουγέννων

Ένα χριστουγεννιάτικο κουμπί CSS που χρησιμοποιεί data:urls, μια μέθοδος για την ενσωμάτωση μιας εικόνας απευθείας σε ένα έγγραφο:

Μαλακό κουμπί

Στρογγυλό γυαλιστερό κουμπί που δημιουργήθηκε με CSS3:

Μαλακό κουμπί

Τα κουμπιά χρησιμοποιούν μόνο χαρακτήρες Unicode, επιτρέποντας τη χρήση γραμματοσειρών κειμένου ή εικονιδίων:

Μεγάλα 3D κινούμενα κουμπιά CSS3

Ένα άλλο σύνολο τρισδιάστατων κινούμενων κουμπιών CSS για ιστότοπους. Η κινούμενη εικόνα γίνεται χρησιμοποιώντας τις ιδιότητες κινούμενων εικόνων και βασικών καρέ:

Μεταλλικά κουμπιά CSS3

Μια συλλογή από μεταλλικά κουμπιά CSS3 των οποίων τα σύμβολα δημιουργήθηκαν χρησιμοποιώντας τη γραμματοσειρά pictos χρησιμοποιώντας το @font-face . Για το μεταλλικό αποτέλεσμα, χρησιμοποιήθηκαν οι ιδιότητες κουτιού-σκιάς και γραμμικής κλίσης:

Στρογγυλά κουμπιά CSS3

Μια άλλη συλλογή από κινούμενα στρογγυλά κουμπιά στο CSS3:

Κουμπιά κοινωνικών μέσων CSS3 με δυνατότητα κλικ

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

Απλά κουμπιά CSS3

Όμορφα κουμπιά CSS:

κουμπί λήψης 3D

Αυτό το κουμπί 3D χρησιμοποιεί μετασχηματισμό προοπτικής. Λειτουργεί μόνο σε προγράμματα περιήγησης που βασίζονται σε webkit:

Καταπληκτικά κουμπιά κοινωνικών μέσων CSS3

Μεγάλο κουμπί

Συμπαγές γυαλιστερό κουμπί CSS3 με εφέ σκιάς στο κάτω μέρος. Το κουμπί χρησιμοποιεί μια γραμματοσειρά που ονομάζεται Sansita One από τη συλλογή της Google:

Απλά κουμπιά

Μερικά απλά κουμπιά CSS:

Κουμπιά CSS3 Social Media

Απλά κουμπιά CSS

Ένα σύνολο από απλά κουμπιά CSS. Είναι εύκολο να ρυθμιστούν και να χρησιμοποιηθούν. Μπορούν εύκολα να ενσωματωθούν με το Font-Awesome ή άλλη βιβλιοθήκη:

Κουμπιά σε μορφή μάρκας πόκερ

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

Κουμπί ολίσθησης

Εννοια Κουμπιά ολίσθησης CSS:

Κουμπιά μενού διαχειριστή

Πίνακας Διαχειριστή ( μενού ή πλοήγηση) χρησιμοποιώντας CSS3 και το fontawesome πλαίσιο. Κατά την εναλλαγή σε ένα κουμπί, η ενεργή κλάση προστίθεται χρησιμοποιώντας jQuery:

Ραμμένο κουμπί

Ένα απλό κουμπί με μια γραμμή που δείχνει τη δύναμη του CSS3 χωρίς τη χρήση εικόνας φόντου:

Περιστρεφόμενο κουμπί

Στρογγυλό κουμπί με περιστρεφόμενο περίγραμμα για να υποδείξει την τοποθέτηση του ποντικιού:

Κουμπί σε CSS3

Μαλακό κουμπί που δημιουργήθηκε με CSS3 με βάση αυτό το παράδειγμα:

Κουμπί CSS3 με συρόμενη κάρτα

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

Κινούμενη εικόνα των κουμπιών CSS3 σε μορφή καραμέλας

Κουμπί με κινούμενα σχέδια για εμφάνιση της κατάστασης φόρτωσης:

Διακόπτες CSS3

Όμορφα κουμπιά επιλογής που χρησιμοποιούν jQuery για εναλλαγή μιας τάξης:

Γυαλιστερά κουμπιά

Σετ από όμορφα κουμπιά για τον ιστότοπο CSS. Διάφορες ιδιότητες χρησιμοποιούνται για να δώσουν μια τρισδιάστατη γυαλιστερή εμφάνιση:

Πριν δούμε τα κουμπιά, ας δούμε τις κοινές ρυθμίσεις για όλα αυτά.

HTML

Τα κουμπιά θα χρησιμοποιούν πολύ απλό κώδικα HTML:

Εγγραφείτε

CSS

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

ButtonText ( γραμματοσειρά: 18 px/1,5 Helvetica, Arial, sans-serif; χρώμα: #fff; ) a ( χρώμα: #fff; κείμενο-διακόσμηση: κανένα; )

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

Βασικός κώδικας CSS

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

#button1 (φόντο: #6292c2; περίγραμμα: 2px συμπαγές #eee; ύψος: 28px; πλάτος: 115px; περιθώριο: 50px 0 0 50px; padding: 0 0 0 7px; υπερχείλιση: κρυφό; εμφάνιση: block; )

Εφέ CSS3

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

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

/*Στρογγυλεμένες γωνίες*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; ακτίνα περιγράμματος: 15 εικονοστοιχεία; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); εικόνα φόντου: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSS Animation

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

Το ποντίκι πάνω

Το μόνο που απομένει είναι να προσθέσετε ένα στυλ για να επεκτείνετε το κουμπί όταν τοποθετείτε το ποντίκι πάνω του. Το κουμπί πρέπει να έχει πλάτος 230 px για να εμφανιστεί ολόκληρο το μήνυμα.

#button1:hover (πλάτος: 230px; )

Απλή αλλαγή χρωματικού τόνου

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

Βασικός κώδικας CSS

Ο κώδικας CSS είναι πολύ παρόμοιος με το προηγούμενο παράδειγμα. Χρησιμοποιείται διαφορετικό χρώμα φόντου και το σχήμα έχει αλλάξει ελαφρώς. Κεντράρει επίσης το κείμενο και ορίζει το ύψος γραμμής για το κουμπί έτσι ώστε να εμφανίζεται κάθετο κεντράρισμα.

#button2 ( φόντο: #d11717; περίγραμμα: 2px συμπαγές #eee; ύψος: 38px; πλάτος: 125px; περιθώριο: 50px 0 0 50px; υπερχείλιση: κρυφό; οθόνη: μπλοκ; στοίχιση κειμένου: κέντρο; ύψος γραμμής: 38px; )

Εφέ CSS3

Ορίστε τη στρογγυλοποίηση των γωνιών, μια κλίση για το φόντο και μια πρόσθετη σκιά. Χρησιμοποιώντας το rgba κάνουμε τη σκιά μαύρη και διάφανη.

/*Στρογγυλεμένες γωνίες*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; περίγραμμα-ακτίνα: 10px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); εικόνα φόντου: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS Animation

Το κινούμενο σχέδιο δεν διαφέρει ουσιαστικά από το προηγούμενο παράδειγμα.

/*Transition*/ -webkit-transition: Όλα τα 0,5s ease; -moz-transition: Όλα τα 0,5s ευκολία? -o-transition: Όλα τα 0,5s ευκολία? -ms-transition: Όλα τα 0,5s ευκολία? μετάβαση: Όλα τα 0,5s ευκολία?

Το ποντίκι πάνω

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

#button2:hover (χρώμα φόντου: #ff3434; )

Αυτό το εφέ μπορεί να είναι αρκετά εντυπωσιακό ανάλογα με την επιλογή της εικόνας φόντου. Η επίδειξη χρησιμοποιεί ένα μη περιγραφικό φόντο και το εφέ φαίνεται μη περιγραφικό. Δοκιμάστε να χρησιμοποιήσετε μια διαφορετική εικόνα και το εφέ μπορεί να είναι εκπληκτικό.

Βασικός κώδικας CSS

Το κύριο μέρος του κώδικα είναι το ίδιο με τα προηγούμενα παραδείγματα. Λάβετε υπόψη ότι χρησιμοποιούμε μια εικόνα φόντου. Η αρχική θέση φόντου έχει οριστεί σε "0 0". Όταν τοποθετείτε τον κέρσορα, η θέση μετατοπίζεται κατακόρυφα.

#button3 ( φόντο: #d11717 url("bkg-1.jpg"); θέση φόντου: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); μέγεθος γραμματοσειράς: 22px; ύψος : 58px πλάτος: 155px: 0 0 50px;

Εφέ CSS3

Δεν υπάρχει τίποτα ιδιαίτερο σε αυτό το παράδειγμα - στρογγυλεμένες γωνίες και σκιές.

/*Στρογγυλεμένες γωνίες*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; περίγραμμα-ακτίνα: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS Animation

Το animation για αυτήν την περίπτωση διαρκεί περισσότερο για να δημιουργήσει ένα ομαλό και ενδιαφέρον εφέ.

/*Transition*/ -webkit-transition: Όλα τα 0,8s ease; -moz-transition: Όλα τα 0,8s ease. -o-transition: Όλα τα 0,8s ευκολία? -ms-transition: Όλα τα 0,8s ευκολία? μετάβαση: Όλα τα 0,8s ευκολία?

Το ποντίκι πάνω

Τώρα ήρθε η ώρα να μετακινήσετε την εικόνα φόντου. Η αρχική θέση ήταν «0 0». Ορίστε τη δεύτερη παράμετρο στα 150 px. Για οριζόντια μετατόπιση, πρέπει να αλλάξετε την πρώτη παράμετρο.

#button3:hover (θέση φόντου: 0px 150px; )

Τρισδιάστατη προσομοίωση πίεσης κουμπιών

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

Βασικός κώδικας CSS

Κωδικός CSS για το κουμπί μας.

#button4 ( φόντο: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); μέγεθος γραμματοσειράς: 22px; ύψος: 58px; πλάτος: 155px; περιθώριο: 50px 0 0 over 50px; Εμφάνιση: block-align: line-height: 58px;

Εφέ CSS3

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

/*Στρογγυλεμένες γωνίες*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; περίγραμμα-ακτίνα: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); εικόνα φόντου: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Το ποντίκι πάνω

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

#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0,8); 0, 0), rgba(0, 0, 0, 0.4) εικόνα φόντου: -moz-linear-gradient(κάτω, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4); ) εικόνα φόντου: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); κάτω, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) εικόνα φόντου: γραμμική διαβάθμιση (κάτω, rgba(0, 0, 0, 0), 0, 0, 0,4));