September 9
pulsanti di input più comunemente permettono un visitatore del sito di presentare il contenuto di un modulo - qualsiasi cosa, da una semplice scatola contatto a un domanda di lavoro on-line. Utilizzando fogli di stile CSS e una conoscenza di base di HTML, è possibile personalizzare questi pulsanti per apparire nel modo desiderato.
1 Aprire il file di codice sorgente per il modulo in Blocco note o un altro editor di testo o HTML.
2 Creare un foglio di stile digitando il seguente all'interno della sezione <head> del file direttamente sotto il <title> Linea:
<Style type = "text / css">
</ Style>
3 Informi il foglio di stile che si sta andando ad essere la creazione di uno stile per il <input> pulsante con la "mia-pulsante" classe inserendo il seguente tra i due <style> linee:
input.my-button {}
Per farlo funzionare esattamente, si doveva dichiarare la classe "mia-button" all'interno del pulsante di invio. È possibile utilizzare qualsiasi nome di classe che si desidera; "My-bottone" è solo un esempio.
4 Personalizza il tuo pulsante di ingresso dichiarando regole all'interno delle parentesi graffe, terminando ogni regola con un punto e virgola. Per iniziare, modificare la larghezza e l'altezza del pulsante con la "larghezza" e "altezza" attributi:
input.my-button {
width: 200px;
altezza: 100px;
}
5 Cambiare il colore del pulsante utilizzando il "background-color" attributo e il colore del testo con l'attributo "colore":
background-color: black;
colore: giallo;
6 Modificare il bordo del pulsante con l'attributo "confine". All'interno del confine attributo è possibile dichiarare la larghezza del bordo in pixel, di tipo - punteggiato, tratteggiato, ecc --e colore:
border: 4px tratteggiato giallo;
7 Cambiare l'aspetto del carattere utilizzando attributi come il "font-size", "text-transform," e "font-family" attributi:
font-size: 30px;
font-family: Trebuchet MS;
text-transform: uppercase;
8 Utilizzare un'immagine di sfondo personalizzata con l'attributo "background-image". Salvare l'immagine sul desktop come button.jpg. Sbarazzarsi del valore "background-color" e impostare "confine" per 0 all'interno del file di codice sorgente:
background-image: url ( 'button.jpg');
border: 0;