Button με εικονίδιο και κείμενο γίνεται; Βεβαίως και γίνεται!

…και όχι, χωρίς να καταφύγετε σε λύσεις του στυλ “div που μοιάζει με button”.

Σκεφτόμουν ότι κάτι τέτοιο είναι πολύ στοιχειώδες για τη θεματολογία που θα ήθελα να έχει το blog, όμως προς μεγάλη μου έκπληξη παρατηρώ ότι αρκετοί συνάδελφοι δεν το γνωρίζουν, και θεωρούν ότι button μπορούν να δημιουργήσουν μόνο με το κλασσικό <input type=”button/submit/image” /> τρόπο.

Υπάρχει ωστόσο και ένα άλλο tag, το <button /> tag, το οποίο είναι ισοδύναμο όσον αφορά τη λειτουργικότητα με το <input type=”button” />, αλλά επιτρέπει πολλά περισσότερα όσον αφορά την εμφάνιση. Καταρχάς, μπορείτε να βάλετε μέσα ένα <img /> tag και να έχετε αυτομάτως ένα κουμπί και με κείμενο, και με το εικονίδιο σας.

Θα μπορούσε κάποιος να πει “γιατί δεν το κάνεις βάζοντας ως background image σε ένα απλό <input /> το εικονίδιο που θες, ώστε να είναι separated το markup από το presentation όπως ορίζουν τα web standards;” και θα είχε δίκιο, όχι όμως για ολες τις περιπτώσεις. Το να ρυθμίσεις το background σε ένα κουμπί, οδηγεί τους περισσότερους browsers στο να το κάνουν render με διαφορετικό τρόπο από αυτόν του OS. Σε κάποιες περιπτώσεις αυτό είναι επιθυμητό, σε κάποιες άλλες όχι. Επιπλέον, με αυτή τη λύση θα έπρεπε να ορίσουμε κάποιο padding-left στο κουμπί, ώστε να μην πέφτουν τα γράμματα πάνω από το εικονίδιο. Trivial θα μου πείτε. Well, ο Safari όμως θεωρεί το button (με όποιο τρόπο κι αν ορίζεται) ως inline element, το οποίο κατά συνέπεια, δεν μπορεί να έχει padding. Άρα, με τον τρόπο του background, το κουμπί μας θα φαινόταν φρικτό στον Safari.

Αρκετά όμως με τη θεωρία. Ας περάσουμε στην πράξη. Στην περίπτωση μου, το markup ήταν το παρακάτω:

<button tabindex="2"><img src="go.png" alt="" />Μετατροπή</button>

Το CSS που το μορφοποιεί το ακόλουθο (αν θέλετε μπορείτε να το προσπεράσετε, αλλά το θεώρησα χρήσιμο για να κατανοήσετε τα screenshots που ακολουθούν):

body,textarea,button
{
	font-family:Calibri, "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	color:#666;
}

textarea,button
{
	padding:5px;
	display:block;
	margin:auto;
}

#options button
{
	float:left;
	margin:5px auto;
	font-size:18px;
	font-weight:bold;
	line-height:16px;
}

button img
{
	vertical-align:middle;
	margin-right:5px;
}

button:hover
{
	color:#444;
}

Και ιδού το αποτέλεσμα στην τελευταία έκδοση του καθενός από τους μεγάλους browsers: