Utilizzando una combinazione di markup HTML e CSS (Cascading Style Sheets) dichiarazioni, siti Web possono caratterizzare elementi interattivi quali pulsanti. Moduli HTML utilizzano gli elementi di input inclusi i pulsanti per fornire l'interazione dell'utente all'interno di un sito. Gli elementi Button in genere compaiono in modi standard all'interno del browser dell'utente, ma gli sviluppatori possono optare per fornire proprietà di uno stile specifico determina il loro aspetto, inclusi i bordi.

Elemento di input

Per includere un pulsante HTML all'interno di una pagina Web, è possibile utilizzare l'elemento di input. L'elemento di input è una caratteristica comune all'interno di Web Form e può essere qualsiasi tipo di testo o pulsante. Il seguente codice di esempio viene illustrato anche un pulsante di input HTML:

< tipo input = "pulsante" value = "Premere Me" class = "standardbtn" / >

Il valore del pulsante determina il testo che verrà visualizzato su di esso. Utilizzando l'attributo di classe consente al codice CSS identificare il pulsante.

Identificatore di CSS

Codice CSS può identificare elementi HTML utilizzando i loro nomi di tag, gli attributi ID o gli attributi di classe. Se uno sviluppatore desidera applicare lo stesso stile a tutti gli elementi di input all'interno di un sito, egli può utilizzare il nome del tag di elemento come identificatore come segue:

input () {

/Dichiarazioni CSS qui/

}

Se un elemento è unico all'interno della pagina Web e ha un attributo ID, codice CSS può utilizzare questo come segue:

mainbtn () {

/Dichiarazioni CSS qui/

}

Questo dovrebbe funzionare dove il pulsante di ingresso ha un attributo ID con "mainbtn" come valore. Per utilizzare un attributo di classe, in cui caso un pulsante viene assegnato a un gruppo di elementi, codice CSS può utilizzare la seguente sintassi:

input.standardbtn () {

/Dichiarazioni CSS qui/

}

Dichiarazione di confine

Codice CSS può dichiarare uno stile di bordo in un certo numero di modi. Per dichiarare un set di proprietà che verranno applicate a tutti i lati dell'elemento pulsante di input, può essere utilizzata la seguente sintassi:

input.standardbtn () {

border: 1px solid #000000;

}

Questo codice specifica la larghezza del bordo, stile e colore per tutti e quattro i lati del pulsante di input. Ognuno di questi elementi può avere diversi valori possibili per soddisfare lo stile generale di un sito Web o una pagina.

Lati del bordo

Codice CSS può dettare lo stile dei singoli lati del pulsante input separatamente. Ad esempio, il codice seguente specifica tutte le proprietà del lato superiore del pulsante di ingresso in un'unica riga:

border-top: 3px dotted #FF0000;

Codice CSS in alternativa possibile specificare uno stile per i lati di quattro elementi in termini di singola proprietà:

border-width: 1px 2px 1px 2px;

Questa sintassi determina la larghezza del top, right, bottom e parti di sinistra.

Proprietà del bordo

Codice CSS può dettare lo stile per le singole proprietà, nonché utilizzare stenografia per dichiarare tutti in una sola riga. Ad esempio, il codice riportato di seguito viene illustrato come impostare il colore del bordo:

border-color: #0000FF;

Di seguito viene illustrato lo stile del bordo:

stile del bordo: double;

Gli sviluppatori sono liberi di scegliere qualunque regime di sintassi adatti allo stile di qualsiasi particolari siti su che lavorano.