pulsanti web stupendi con un comportamento corretto, può essere fatto?

Question

Per la mia applicazione, volevo personalizzare i pulsanti di invio piacevolmente. Con il normale CSS, sono riuscito a farlo sembrare buono in Firefox e orribile in IE. Poi ho visto questo blog:

http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/

Utilizzando questa tecnica si ottiene splendidi bottoni, in quasi tutti i browser. Tuttavia, vi sono anche alcuni problemi di accessibilità:

• Poiché utilizza collegamenti anziché input o elementi di pulsante HTML reali, facendo clic sul pulsante non viene inviato il modulo. Questo è facilmente risolvibile usando Javascript, ma sarebbe l'ideale se il pulsante di invio funziona senza Javascript abilitato.
• Un altro problema è che premendo [INVIO] non si invia il modulo. Un trucco sporco consiste nell'inserire un elemento di input invisibile di tipo "submit" o "image".

Fondamentalmente quello che voglio è forse l'impossibile: la qualità dello stile vista nel post di blog, ma implementata utilizzando elementi normali in modo da ottenere un comportamento normale.

Devo davvero scegliere tra hack sporchi o uno stile scadente?

Ogni pulsante stile tutorial che ho visto finora è sub risultati ottimali in IE :(

Answer 1

Devo veramente scegliere tra hack sporche o styling poveri?

No, potresti usare Javascript come il resto di noi. Carica nel tuo modulo standard (completo di pulsante di invio), e poi usa Javascript ben scritto per "aggiustare" dinamicamente alcuni degli elementi brutti. Suggerirei di valutare il framework jQuery per questo tipo di cose se si desidera utilizzare il codice pulito e ottenere il supporto per browser multipli.

Answer 2

Potreste essere in grado di trasportare il liquido pulsante thingy si parla in una configurazione <button type="submit"></button> sostituendo i circostanti <div> s da button elementi, e le <a> s da <span> s.

Answer 3

È possibile utilizzare un normale pulsante di invio e utilizzare JavaScript per sostituirlo con un pulsante con stile JS. In questo modo, è possibile utilizzare solo JavaScript in cui sai che sarà sostenuto e non lascerà gli utenti NoScript con una pagina rotta

Answer 4

Partenza pulsanti di Yui ... sembra che abbiano capito questo

http://developer.yahoo.com/yui/examples/button/btn_example01.html

Answer 5

Vedere this tutorial. Nessun JavaScript, nessun link al posto dei pulsanti, funziona in IE6 tramite IE8.

Answer 6

Sì, lo fai.

Tranne che non è "scarso stile", è browser chrome. Gli elementi del modulo fanno parte del browser. "Styling" confonde l'utente e impedisce l'usabilità. Seriamente, lasciali stare da soli.

Non importa quanto lontano si passi con lo stile di input, inevitabilmente si colpisce il muro di mattoni dell'elemento di caricamento file, che è praticamente impossibile da stile.E se non riesci a modellarli tutti, perché preferisci uno di loro.

Seriamente, questo è simile alle barre di scorrimento dello stile. Non preoccuparti

Answer 7

Per la mia applicazione, volevo personalizzare i pulsanti di invio in modo corretto. Con il normale CSS, sono riuscito a farlo sembrare buono in Firefox e orribile in IE.

Per IE è necessario aggiungere overflow: visible; per sbarazzarsi di imbottitura "inspiegabile". Questo è fondamentalmente tutto ciò che devi prendere in considerazione per IE (a patto che tu non sia in Quirksmode).

Poi vidi questo blog:

Non sarebbe andare per esso. Basta attenersi a <button type="submit"> o <input type="submit"> con una buona dose di CSS. È anche possibile utilizzare le immagini di sfondo CSS su quei pulsanti. Non prenderei JavaScript anche per problemi di layout, perché ciò potrebbe causare "wtf?" esperienze durante il caricamento della pagina quando l'utente vede immediatamente parti della pagina che cambiano rapidamente. Usa semplicemente i CSS in modo intelligente.

Answer 8

In realtà, non è necessario utilizzare Javascript o qualcosa di simile. Puoi usare anche i pulsanti.

Proseguendo da http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ apportare le seguenti modifiche:

1. Aggiungere il seguente alla dichiarazione CSS

   pulsante .btn { float: left; altezza: 40px; background: url (images/btn_stretch.png) repeat-x left top; altezza riga: 40px; padding: 0 10px; color: #fff; dimensione carattere: 1em; testo-decorazione: nessuno; bordo: 0; }

2. Aggiungere il seguente al codice HTML:

   < div class = "btn btn_learnmore" > <pulsante> si dovrebbe fare un tentativo </pulsante > <arco> </span > </div >

Modifica: aggiungere anche il margine: 0 alla dichiarazione del pulsante css.

Answer 9

Credo ci sia un <input type="image" src="ButtonBg.jpg" />

http://webdesign.about.com/cs/forms/a/aaformsubmit.htm

Non ho mai usato comunque.

Answer 10

Hai dato un'occhiata ai pulsanti Awesome?

http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Sono abbastanza impressionante, può essere applicato a link o pulsanti e guardare bene in tutti i browser che ho provato (IE6 ha un paio di piccoli problemi, ma un po 'css solo per loro risolve le cose).

Answer 11

Usiamo semplicemente i CSS per creare dei pulsanti molto belli. Funziona in IE6 - 8 e Firefox.

input.blueButton 
{ 
    background-image: url(../Images/blueButton.gif); 
    width: 80px; 
    height: 21px; 
    font-family: Arial; 
    font-size: 11px; 
    font-weight: bold; 
    color: White; 
    background-color: Transparent; 
    border-style: none; 
    cursor: pointer; 
    padding-bottom: 1px; 
    margin: 0 3px; 
}