Ciao a tutti ...
Ho un piccolo problema ho questo bellissimo css che mi crea un bottone cliccabile blu ecc ecc e fin qui tutto bene ...
ma se provo a vederlo su ie il bottone magicamente diventa giallo
qualcuno sa dirmi che cosa posso aggiungere per far si che anche in ie si veda come negli altri browser
Bottonecodice:.button { display: inline-block; /* opzionale */ outline: none; cursor: pointer; /* impostiamo che il cursore diventi mano quando si va sopra il tasto */ text-align: center; /* allineiamo il testo al centro */ text-decoration: none; /* senza decorazioni perchè non ci piace :P */ font: 14px/100% Arial, Helvetica, sans-serif; /* definiamo il font */ padding: .5em 2em .55em; /* un pò di padding */ text-shadow: 0 1px 1px rgba(0,0,0,.3); /* attributo css3 per dare un pò di ombra al testo; la "a" di rgba sta per "alfa" con il quale si imposta il livello di trasparenza */ -webkit-border-radius: .5em; /* i bordi impostati per i browser che utilizzano il webkit */ -moz-border-radius: .5em; /* i bordi impostati per mozilla firefox */ border-radius: .5em; /* per tutto il resto (su ie non funziona) */ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); /* un pò di ombra per i browser webkit */ -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); /* la stessa ombra su firefox */ box-shadow: 0 1px 2px rgba(0,0,0,.2); /* idem per gli altri browser (tranne IE) */ } .orangeButt { color: white; /* il colore del testo */ border: solid 1px #003366; /* il bordo del colore che vogliamo */ background: #003366; /* un background di base */ background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#266cb2)); /* Ecco la sfumatura, che parte da "left top" e arriva a "left bottom" "from" il colore "to" l'altro colore */ background: -moz-linear-gradient(top, #003366, #266cb2); /* stessa cosa per firefox */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* questo codice invece funziona per explorer, anche se richiede il lancio di un ActiveX che di default è settato a true sui IE, ma che potrebbe richiedere la conferma da parte dell'utente */ } /* poi definiamo il css quando si passa sopra il tasto con il mouse */ .orangeButt:hover { background: #0c4073; /* colore più scuro */ background: -webkit-gradient(linear, left top, left bottom, from(#0c4073), to(#1887f6)); background: -moz-linear-gradient(top, #0c4073, #1887f6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f06015'); } /* infine definiamo il css per quando si clicca il tasto */ .orangeButt:active { color: #000; padding-top:1px; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background: -moz-linear-gradient(top, #ffffff, #cccccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffffff', endColorstr='#cccccc'); }
codice:<button class="button orangeButt">Pubblica gratis</button>


Rispondi quotando