41 δωρεάν κουμπιά CSS με λίγο JavaScript

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

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

3D κουμπί

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

Κουμπί 3D για να πατήσετε

αυτό Κουμπί 3D σε CSS έχει την ικανότητα να αρχίσει να λειτουργεί το κινούμενο σχέδιο καθώς παρατείνουμε τον παλμό του.

Πίσω κουμπί

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

Κουμπί φούσκα

Ένα κουμπί φούσκα σε CSS και JavaScript που όταν κάνετε κλικ θα πιτσιλιστεί με μια σειρά φυσαλίδων με εντυπωσιακή και κατάλληλη κίνηση.

Προσθήκη κουμπιού

ένα χαριτωμένη κινούμενη εικόνα δίνει ζωή σε αυτό το κουμπί προσθήκης στο CSS που μπορεί να είναι ένα από αυτά τα στοιχεία που κάνουν τον ιστότοπό μας να ξεχωρίζει.

Κουμπί Offset CSS

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

Κλείσιμο κουμπιού

Πατάμε αυτό κουμπί σε CSS και HTML για να κλείσει μια κινούμενη εικόνα. Απλό, αλλά με εξαιρετικό οπτικό εφέ.

Κουμπί κλεισίματος CSS

Εκείνη τη στιγμή ας αφήσουμε το δείκτη του ποντικιού Σε αυτό το κουμπί κλεισίματος, θα είμαστε σε θέση να ανακαλύψουμε την ποιοτική κινούμενη εικόνα που θα ενσωματώσουμε στον Ιστό.

Κουμπί λήψης CSS

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

Κουμπί λήψης

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

Λήψη κινούμενου κουμπιού

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

Κουμπί δείκτη

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

Κουμπί θορύβου

Ένα άλλο κουμπί hover που ξεχωρίζει ηλεκτροκινητικό κινούμενο σχέδιο που συμβαίνει όταν αιωρείται πάνω από το δείκτη.

Αιωρηθείτε εφέ

Ένα άλλο ενδιαφέρον hover αποτέλεσμα στο CSS που ξεχωρίζει για αυτό γρήγορη και ευκίνητη κίνηση που παράγει καλές αισθήσεις.

Κομψό εφέ αιωρήματος

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

Εφέ Gooey

Un απλό και περίεργο αποτέλεσμα το οποίο αυξάνει το μέγεθος του κουμπιού CSS με λίγο HTML.

Κουμπί ρίγας

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

Τρία εφέ κουμπιού CSS

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

Όπως το κουμπί Twitter

Ενα κουμπί μου αρέσει για το Twitter με μια λαμπερή και ενεργητική κίνηση. Ιδανικό για αυτές τις μέρες κοινωνικής δικτύωσης.

Όπως το κουμπί κίνησης

εδώ θα είναι οι καρδιές εκείνοι που πηδούν χαρά όταν πατηθεί το κουμπί like.

Κουμπί όπως το Splat like

Άλλος πολύ περίεργο κινούμενο σχέδιο με μεγάλο εφέ για κουμπί like για κοινωνικά δίκτυα.

Κουμπί αναπαραγωγής

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

Κουμπί αναπαραγωγής CSS

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

Κουμπί παύσης / αναπαραγωγής

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

Ρετρό απλό κουμπί

Σαν να πατάμε το κουμπιά σε έναν ελεγκτή παιχνιδιών από μια κονσόλα όπως το XboX.

Κουμπί "ουράνιο τόξο"

Ένα κουμπί με ένα κινούμενα σχέδια ουράνιου τόξου που αναδημιουργεί τις ειδοποιήσεις που έρχονται στο Galaxy S8.

Κοινωνικό κουμπί

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

Κινούμενη κίνηση

Ένα κουμπί με ένα ποιοτική κινούμενη εικόνα που ενεργοποιείται τη στιγμή που κάνουμε κλικ σε αυτό.

3D κοινωνικά εικονίδια

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

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

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

Κυβικά κοινωνικά κουμπιά

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

Κοινή χρήση κουμπιών

Un κουμπί κοινής χρήσης διακρίνεται από ένα άπειρο κυκλικό animation.

Κουμπί κοινής χρήσης μέσων κοινωνικής δικτύωσης στο SVG

Απλώς πατήστε το κουμπί κοινής χρήσης και θα βρείτε το θεϊκό αποτέλεσμα που εμφανίζεται σε αυτό το κουμπί κοινωνικών μέσων.

Κουμπί κοινής χρήσης Gooey

Με άλλα κινούμενα σχέδια «Gooey», αυτό το κουμπί είναι πολύ εντυπωσιακό για το αποτέλεσμα που παράγει.

μερίδιο

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

Κουμπί αστεριών κριτικών

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

Κουμπί βαθμολογίας SVG

Ένα άλλο κουμπί αιωρήματος για βαθμολογία με βαθμό ένα προϊόν ή οτιδήποτε άλλο.

Κουμπί φόρτισης

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

Κουμπί αποδοχής

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

Κουμπί σάρωσης

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

Ξεκλείδωμα χειρονομίας

Un πλαϊνή χειρονομία με δάχτυλο ή δείκτη και θα ξεκλειδώσουμε το ίδιο το τερματικό. Ένα άλλο ιδανικό κουμπί για κινητά.