Pulsante CSS a dimensione fissa 
Author: Danilo R.Buonasera, ho un pulsante CSS per il sito, chiedo quale stringa devo inserire perchè la dimensione non sia variabile in funzione della lunghezza del testo.
questo è lo style:
.btngrigiopromo{text-decoration:none; text-align:left;
padding:12px 70px;
border:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:14px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000000;
background-color:#e1e1e1 ;
background-image: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 e1e1e1 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
background-image: -ms-linear-gradient(top, #ffffff 0% ,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0% ,#e1e1e1 100%);
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}.btngrigiopromo:hover{
padding:12px 70px;
border:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:14px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000000;
background-color:#e1e1e1 ;
background-image: -moz-linear-gradient(top, #e1e1e1 0%, #c9c9c9 100%);
background-image: -webkit-linear-gradient(top, #e1e1e1 0%, #c9c9c9 100%);
background-image: -o-linear-gradient(top, #e1e1e1 0%, #c9c9c9 100%);
background-image: -ms-linear-gradient(top, #e1e1e1 0% ,#c9c9c9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
background-image: linear-gradient(top, #e1e1e1 0% ,#c9c9c9 100%);
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
Grazie mille.
Author
Aggiungo, e allineare il testo a sinistra?
Su che tipo di elemento agisce quel CSS?
Un link da vedere TI aiuterebbe.
Comunque, se fosse un elemento di blocco, puoi azzerare il padding laterale destro ed assegnare una larghezza (width).
In allegato un esempio.
Author
I pulsanti agiscono su questi elementi:
<a href="#" class="btnpromo"/>Richiedi informazioni</a>
<a href="#" class="btngrigiopromo"/>Dettagli Volkswagen Nuova Polo</a>
Quì c'è un esempio in quanto il mio sito lo devo ancora pubblicare in quanto devo completare i collegamenti, colori e sfumature sono a posto ma a volte i testi pussono essere più lunghi o corti de devo sempre agire mettendo spazi dopo il testo.
http://www.carnevalicars.it/vw/Gamma/Promo/Nuova-polo
Grazie
Author
Dimenticavo una cosa, ho anche la freccina che c'è prima del testo ma non riesco ad inserirla.
Mah, se vuoi un copia/incolla del pulsante presente in quel sito, trovi HTML e CSS nell'allegato.
Mi sembra di aver preso tutto, forse troppo... vedi tu.
La freccia ha un percorso assoluto, scaricala ed inseriscila con percorso relativo.
Author
Tutto bene, ho messo tutto il "css" nella proprietà e come "class" metto il pulsante di cui ho bisogno nelle varie pagine cambiando dimensione e colori, ma ho un problema, pur avendo messo il percorso assoluto per la freccina non le mette:
.button-big.promo a:hover {
background-image: url(http://i1162.photobucket.com/albums/q524/dani0548/dark_btn_bigarrow_zpsbe15e8e5.png);
background-repeat: no-repeat;
background-position: left center;
text-decoration: none;
Ho pubblicato il sito con i bottoni provvisori con lo style provvisorio di inizio pagina:
http://www.fabiocorradi.it/promo-golf-variant.html
http://www.fabiocorradi.it/gamma-up.html
Poi dovremmo studiare (dico dovremmo perchè siete sempre gentili e disponibili
) qesto menù verticale con le freccine ce resti evidenziata la pagina che sto visitando.
http://www.carnevalicars.it/vw/Gamma/Up (nel mio l'ho fatto con un file di testo).
Grazie di tutto.
ps: tutte queste domande perchè mi manca una certa conoscenza della materia ma impegnandomi e con il vostro aiuto qualcosa di buono combino
Author
L'immagine allegata è relativa al nuovo style pulsante_vw.txt.
Volendo, senza tanti codici, potevi inserire delle semplici immagini con testo incorporato, ed effetto rollover da programma....
Comunque, stai facendo davvero un bel sito...complimenti...
Author
Il sito è dell'azienda di mia figlia e cosa non si fa per fargli risparmiare (con i tempi che corrono). In questo sito c'è anche una parte di voi è di questo vi ringrazio tanto (i pulsanti menu' principale sono tuoi Mirko), per quanto riguarda la struttura principale (pulsanti e varie) preferisco (con il vostro aiuto) farli con css.
grazie.
Author
Finalmente funziona tutto, come ultimo chiedo se è possibile darmi una mano a copiare questo menu verticale (lemonsong):
http://www.carnevalicars.it/vw/Gamma/Up
Grazie ancora
Se ho capito bene a quale menu ti riferisci, si può fare uguale da programma (Menu di Pagina).
Author
Ma il problema che lo devo mettere solo in determinate pagine.
Author
Tutto ok e sto procedendo benissimo. Un ultima cosa (spero sia ultima) nei pulsanti pur avendo un carattere speciale (VWHeadlineOTSemibold) che in origine nella cartella caratteri è scritto così "VW Headline OT Semibold" usa sempre il carattere "Arial" nei pulsanti?
Grazie ancora.
X
Se vuoi inserire un font particolare, leggi la guida e scrivi la font-family giusta nel CSS del pulsante.
Author
Scusa sembra sistemato così:
"VW Headline OT-Semibold" nel foglio di stile.
X
Author
Ho una domanda per lemonsong (che già mi aveva risolto per un'altro sito). Ho un menù nel quale deve essere attivo nella pagina che sto visitando come questo esempio:
http://www.carnevalicars.it/vw/Service-Promozioni (quello sotto l'immagine promozioni), allego il txt.
Author
Risolto, il problema stava qui: "class="selected"