««« | »»»
Styling dei pulsanti
Il pulsante grafico ideale dovrebbe essere:
- Ridimensionabile orizzontalmente in base alla quantità di testo
- Ridimensionabile nelle due dimensioni
- Poter avere gli angoli smussati
- Avere aree non cliccabili
- Essere leggibile quando le immagini sono disabilitate
L’articolo propone di usare l’elemento <input type="submit">, accoppiato con l’uso di JavaScript per sostituire l’elemento con un link che verrà poi abbellito. In questo modo il form rimarrà utilizzabile anche nel caso in cui JavaScript sia disabilitato.
La cosa che mi lascia perplesso è che non viene fatto nessun cenno alla possibilità di usare l’elemento button (ma vedi anche i commenti).
Il primo problema è la difficoltà di IE nel calcolare la larghezza di elementi di blocco, all’interno di elementi floated senza il valore di width specificato. Questo serve nel caso dei pulsanti per fare in modo che il link si dimensioni in base alla quantità di testo.
Il secondo problema è legato al posizionamento assoluto degli angoli del pulsante.
La soluzione, un po’ pesante dal punto di vista del markup, consiste in 4 span nidificati che avvolgono uno span con il testo.
I difetti segnalati sono:
- Gli angoli non possono essere trasparenti;
- può essere difficile usare sfondi non piatti;
- il pulsanti si può espandere solo fino alle dimensioni dell’immagine.
Altri articoli correlati:
Per proseguire
Commenti e trackback sono disabilitati.