Τα όμορφα κουμπιά σε μία ιστοσελίδα σίγουρα μπορούν να την κάνουν ξεχωριστή. Έτσι ετοίμασα ένα fillde που περιέχει τέσσερα κουμπιά με διαφορετικές κινήσεις, χρησιμοποιώντας μόνο html και CSS.
Η βασική κίνηση είναι το slide ενός χρώματος επάνω στο κουμπί, και η λύση που σας παραθέτω έχει κίνηση από τέσσερις διαφορετικές κατευθύνσεις.
Φτιάχνουμε λοιπόν ένα link και του δίνουμε δύο κλάσεις, μια που να ορίζει ότι το link είναι κουμπί και μια που να ορίζει την κατεύθυνση της κίνησης. Στην κλάση του κουμπιού (.button) ορίζουμε τη μορφή και το χρώμα του κουμπιού μας. Για να πετύχω τη συγκεκριμένη κίνηση, χρησιμοποιώ ένα επιπλέον layer μορφοποίησης πρίν τη δημιουργία του κουμπιού με χρήση ψευτό-στοιχείου :before.
Ουσιαστικά στην :before
- φτιάχνουμε ένα κουτάκι με το χρώμα φόντου που θέλουμε,
- βάζουμε θέση absolute με left, top, right, bottom ίσα με μηδέν, ώστε να είναι ίσο με το μέγεθος του κουμπιού,
- με την transform: scaleX(0) κάνουμε πρακτικά μηδενικό το πλάτος του κουτιού που φτιάξαμε,
- με την transform: origin: 0 50% “στέλνουμε” το κουτάκι αριστερά του κουμπιού
- και ορίζουμε τη διάρκεια και τον τύπου της κίνησης για την transform (transition-property: transform; transition-property: transform; transition-timing-function: ease-out;)
Αυτή τη στιγμή, έχουμε ένα κουμπί και ένα κουτάκι πρακτικά μηδενικού πλάτους αριστερά από το κουμπί, που περιμένει να εμφανιστεί και να μεγαλώσει σε πλάτος, ώστε να μας δώσει το επιθυμητό εφέ.
Άρα, με το ψευτο-στοιχείο :hover (δηλαδή όταν βάζουμε το ποντίκι μας επάνω στο κουμπί) θα πρέπει να κάνουμε το κουτί ίσο σε πλάτος με το κουμπί. Οπότε στην a:before:hover κάνουμε με την transform: scaleX(1) το πλάτος του κουτιού ίσο με το πλάτος του κουμπιού.
Δείτε παρακάτω το αποτέλεσμα των τεσσάρων κινήσεων και τον τελικό κώδικα html και CSS που χρησιμοποίησα:
Πατήστε το κουμπί παρακάτω να δείτε live το αποτέλεσμα στο jsfiddle. Enjoy!
