Bottoni creativi e CSS
Venerdì 19 Settembre 2008 - 08:21
di Cesare Lamanna
Abbiamo parlato a suo tempo dell’uso dell’elemento button come alternativa più flessibile rispetto a input ai fini di una formattazione efficace con i CSS: questo post elenca le risorse più rilevanti sul tema.
Prendendo spunto dall’articolo di Particletree citato nel nostro intervento, Dave Shea ha messo in opera un interessante esperimento. La sfida era quella, dettata da esigenze pratiche intervenute nello sviluppo di un sito, di creare bottoni graficamente coerenti nello stile e con una buona resa cross-browser ma definiti sia come link (uso di a) sia come pulsanti propriamente detti (attraverso input).
Sforzi vani per via delle difficoltà poste dall’applicazione dei CSS sui pulsanti di tipo input. Passando a button il risultato è stato ottenuto: ecco la pagina degli esempi. Nelle coppie di bottoni, il primo è ottenuto con button, il secondo con a. Unica e comune ad entrambi la regola CSS di base usata. Potete verificarlo scaricando lo zip con il codice e studiando il file default.css incluso.
Commenti
1
saranno anche belli ma trovo che ci sia molto codice per un singolo button; un div vuoto prima dell’elemento button… non mi piace e non credo di usarlo.
2
Cavolo… dovrei incominciare a scrivere articoli pure io. Ho praticamente fatto la stessa cosa, a gennaio per un progetto.
Floyd, il problema non e’ “volerlo” usare… ma “doverlo” usare. Purtroppo non hai scelta: se devi creare dei bottoni graficamente perfetti, consistenti in tutti i browser, che funzionino anche sui link e che siano “adattabili” al contenuto non hai scelta… devi ridondare un po’ di codice per ottenere l’effetto voluto.
Mi viene in mente ora che ho fatto la stessa cosa qui:
(link) http://www.ryvitalimbos.co.uk/.....mpetition/
(bottone) http://www.ryvitalimbos.co.uk/.....ition.aspxl’approccio e’ un po’ diverso perche’ il link o il bottone stesso fanno da contenitori. Ma l’idea di base e’ simile. In questo caso pero’ non avevo la necessita’ di mantenere identico il markup per cui sul link ho usato un solo span aggiuntivo, mentre sul button ne sono stati necessari due…
Ciao!
# - postato da Andrea - 19 Settembre 2008 - 10:56
3
Carina l’idea, ma trovo che rendere uguali 2 elementi che semanticamente non lo sono rischia di confondere gli utenti.
Inoltre a mio avviso, perdere l’effetto “click” sui pulsanti è un peccato (se non un errore).
# - postato da Luca - 19 Settembre 2008 - 13:07
4
Assolutamente daccordo… ma infatti in teoria andrebbe fatto (e mi pare che l’esempio di Dave Shea lo faccia). Nel mio caso specifico e’ una cosa che ho tralasciato perche’ a) chi ha fatto la grafica non l’aveva neanche previsto, b) avevo tempi ultra strettissimi per cui ho tagliato un po’ corto :D
# - postato da andrea - 19 Settembre 2008 - 13:21
5
Per il codice in più è una menata, in fondo è poco codice in più e spesso si fa copia e incolla per più button da replicare.
Io li ho usati per una campagna pubblicitaria in cui il bottone era l’immagine di un premio, chi vi cliccava su partecipava alla campagna, eccetera.
Con input non sarebbe stato possibile realizzarlo.M.
# - postato da Marco GRAZIA - 19 Settembre 2008 - 13:28
6
PS sudo make a sandwich? E’ un’idea a quest’ora ma funziona veramente? :-D
M.
# - postato da Marco GRAZIA - 19 Settembre 2008 - 13:29
7
Salve
Su Kledy puoi trovare i bottoni x il tuo blog
Ciao