Qui a Design Shack ci piace presentare una gamma completa di tutorial, dai progetti PHP esperti ai suggerimenti CSS molto semplici. Il tutorial di oggi è rivolto a coloro che sono ancora nelle fasi principianti di CSS.
Una delle domande più frequenti che ho dai principianti CSS è: "Come faccio a creare un pulsante?" È una domanda semplice con una risposta complicata. Ci sono diversi modi per farlo e sfortunatamente ci sono anche diversi modi per sbagliare. Quando ho iniziato a lavorare in CSS, capire che tutta la sintassi dei pulsanti era uno dei problemi più persistenti che ho affrontato, sembrava che lo facevo sempre male. Oggi cammineremo attraverso un processo molto semplice e flessibile che puoi applicare a qualsiasi pulsante che crei. Più importante del risultato finale è la spiegazione approfondita in ogni punto che delinea il motivo per cui lo facciamo in questo modo.
Passaggio 1: Html
Che ci crediate o no, questa è una delle parti più difficili. Per un programmatore esperto, sembra così semplice. Per un principiante, tuttavia, sapere da dove iniziare con un pulsante può essere abbastanza difficile. Dovresti usare il tag HTML "button"? O forse un tag di paragrafo? Quali parti deve avvolgere il collegamento?
Si scopre che la sintassi più semplice e più utilizzata è solo per implementare un semplice vecchio tag di ancoraggio (i pulsanti del modulo usano spesso "input"). Da un punto di vista funzionale, tutto ciò che stiamo davvero cercando di creare è un link che, quando cliccato, ci porta in un posto nuovo, che è esattamente ciò che fa un link HTML di base. Spesso nel web design, la scelta di trasformare qualcosa in un pulsante è semplicemente estetica e non indica necessariamente alcuna funzionalità speciale.
Ecco uno snippet ampiamente utilizzato di HTML che fa perfettamente il lavoro rimanendo gentile e conciso:
1 |
Se non hai bisogno di un div, non usarne uno
Un problema che ho incontrato quando ho iniziato a codificare è che spesso pensavo di aver bisogno di un div per creare qualsiasi cosa. Usando questa logica difettosa, avvolgerei la mia ancora in un div e quindi applicherei la maggior parte dello stile al div.
Questo è completamente inutile e può creare problemi sia con il clic che con il passaggio del mouse. Nell'esempio precedente, il nostro intero elemento sarà il link. Se lo abbiamo eseguito il wrappe in un div e lo abbiamo stiliato, solo la parte di testo del pulsante sarebbe un collegamento, il che significa che l'utente potrebbe presumibilmente fare clic sul pulsante senza alcun risultato.
Perché usare una classe?
Forse la cosa più importante da notare su questo frammento di codice è che abbiamo aggiunto una classe, che ho genericamente etichettato come "pulsante". Ci sono un paio di ragioni per questo.
Prima di tutto, abbiamo bisogno di un modo per indirizzare e stiliare questo pulsante nel nostro CSS senza necessariamente indirizzare tutti i tag di ancoraggio sulla pagina. Non è quasi mai vero che desideri che ogni singolo link sia un pulsante identico. Tuttavia, è fattibile e molto probabile che a un certo punto si desideri effettivamente riutilizzare lo stile del pulsante. Per questo motivo applichiamo una classe anziché un ID. In questo modo, ogni volta che vogliamo convertire un link di testo normale in un bel pulsante, applichiamo semplicemente la nostra classe "button" e abbiamo finito!
Anteprima passaggio 1
A questo punto dovresti avere solo un collegamento di testo normale con stile predefinito.
Passaggio 2: Stili pulsante di base
Ora che abbiamo il nostro HTML pronto per partire, è il momento di passare al CSS. Ricorda che abbiamo impostato una classe "button" per lo scopo esplicito del targeting CSS, quindi assicurati di usarla per questo passaggio:
1 | .button {
/* Codice qui *
/}
|
La prima cosa che vogliamo fare nel nostro CSS è definire la casella di base che cova la nostra forma pulsante. Ecco gli stili che ho usato. Nota che le mie scelte di colore e le mie dimensioni sono completamente opzionali, sentiti libero di usare quello che vuoi.
1 2 3 4 5 6 7 | .button {
dis
play:
b
locco
;
alt
ezza:
1
00px
;
larg
hezza
:
300px
;
con
testo:
#3
4696f
;
bor
do: rg
b
a s
o
lido
2
px(3
3,
6
8,
72
,
0,59
);
}
|
La cosa più importante che ho fatto qui è stata impostare "display" su "block". Questo ci permetterà di trasformare il nostro collegamento di testo in una casella più grande con una larghezza e un'altezza definite. Successivamente ho semplicemente impostato le mie dimensioni e il colore di sfondo, quindi ho aggiunto un bordo. Utilizzerò "rgba" un bel po ', se vuoi renderlo un po 'più amichevole con i browser più vecchi, dai un'occhiata a questo articolo sulla dichiarazione dei fallback rgba.
Anteprima passaggio 2
Dopo il secondo passo dovresti avere una scatola dall'aspetto abbastanza noiosa con un po 'di testo impossibile da leggere all'interno.
Passaggio 3: Stili di testo
Poi, è il momento di attaccare quel brutto testo. Per assicurarti di poter tenere il passo con ogni passaggio, continuo semplicemente ad aggiungere a ciò che abbiamo creato in precedenza con i commenti per aiutarti a vedere ogni passaggio:
01 02 03 a) La commissione per la 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | .button {
/*Pa
ssaggio 2: Stili pulsante di base*/
dis
play:
b
locco
;
alt
ezza:
1
00px
;
larg
hezza
:
300px
;
con
testo:
#3
4696f
;
bor
do: rg
b
a s
o
lido
2
px(3
3,
6
8,
72
,
0,59
);
/*Pa
ssaggio 3: Stili testo*/
col
ore:
rgba(0
,
0
,
0
,
0,55
);
alli
neamento tes
to
: centr
o;
font
: gr
as
sett
o
3.2e
m
/100p
x
"Helvetica Neue"
,
Arial
,
Helvetica
, Ginevra,
sans-seri
f;
}
/*Passaggio 3: Stile collegamento*/
a.button {
deco
razione del testo:
ne
ssun
o;
}
|
Qui vediamo che ho aggiunto in un colore di testo che è essenzialmente una tonalità più scura del colore del pulsante. Questo trucco si ottiene impostando il colore del testo sul nero e riducendo l'opacità tramite rgba. Successivamente, ho centrato allineato il testo e dichiaro un sacco di cose usando la stenografia del carattere.
Stenografia font
La stenografia CSS è un modo semplice per dichiarare un sacco di proprietà e stili CSS in un'unica riga. In primo luogo, ho dichiarato lo spessore (grassetto), quindi la dimensione del carattere / altezza della linea e infine la famiglia di caratteri. Si noti che l'altezza della linea è impostata esattamente sull'altezza del pulsante. Questo è un modo semplice per assicurarsi che il testo sia centrato verticalmente.
Per ulteriori informazioni sulla stenografia CSS, dai un'occhiata a 6 trucchi css stenografico che ogni sviluppatore dovrebbe conoscere.
Anteprima passaggio 3
Dopo il terzo passo il tuo pulsante dovrebbe effettivamente iniziare a sembrare un pulsante!
Passaggio 4: Stili CSS3 fantasiosi
Il passo precedente ci porta a un pulsante bello e funzionante che non sembra mezzo male. Sfortunatamente, è piuttosto noioso. La parte importante però è che questo pulsante dovrebbe apparire perfetto nella maggior parte dei browser, quindi ora possiamo procedere ad aggiungere una bontà CSS più recente senza preoccuparci troppo di lasciare indietro i browser più vecchi. In definitiva, non mi dispiace davvero se IE decide di abbandonare questi stili successivi perché il mio pulsante dovrebbe funzionare bene per quegli utenti nel suo stato attuale.
Possiamo facilmente essere portati via e scrivere cinquanta righe di CSS per rendere il nostro pulsante splendente e carino, ma lo manterrò davvero semplice per gli scopi di oggi:
01 02 03 a) La commissione per la 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .button {
/*Pa
ssaggio 2: Stili pulsante di base*/
dis
play:
b
locco
;
alt
ezza:
1
00px
;
larg
hezza
:
300px
;
con
testo:
#3
4696f
;
bor
do: rg
b
a s
o
lido
2
px(3
3,
6
8,
72
,
0,59
);
/*Pa
ssaggio 3: Stili testo*/
col
ore:
rgba(0
,
0
,
0
,
0,55
);
alli
neamento tes
to
: centr
o;
font
: gr
as
sett
o
3.2e
m
/100p
x
"Helvetica Neue"
,
Arial
,
Helvetica
, Ginevra,
sans-seri
f;
/*Pa
ssaggio 4: Stili CSS3 fantasiosi*/
sfon
do: gradie
nte lineare (super
ior
e,
#34696
f,
#2f5f6
3);
rag
gio bordo: 5
0px
;
box
-shadow: 0
px
0
#
1b383b
;
tex
t-shadow:
0
2
p
x 2
p
x r
gba(2
55,
2
55
,
255
,
0.2
);
}
/*Passaggio 3: Stile collegamento*/
a.button {
deco
razione del testo:
ne
ssun
o;
}
|
Ognuno di questi può essere difficile da leggere, quindi esaminiamoli uno per uno. Innanzitutto, ho aggiunto una sfumatura che usa il colore che avevamo già in atto e sbiadisce a qualcosa di minuscolo di più scuro. Ho lasciato nel mio precedente colore di sfondo sopra quella sezione per agire come un fallback.
Il prossimo è il raggio del bordo. Ho deciso di andare con un angolo arrotondato davvero pesante che darà al pulsante una forma di pillola. Dal momento che voglio che tutti i miei angoli siano uguali, dichiaro semplicemente un valore e viene applicato uniformemente.
Alla fine, ho gettato in alcune ombre. Sia la casella che l'ombreggiatura del testo che ho usato sono un po 'particolari. Per l'ombreggiatura della casella, un oggetto gli ha dato un offset verticale ma nessuno orizzontale e ha anche lasciato la sfumatura a 0. Questo darà un bel piccolo effetto 3D falso che non richiede troppo lavoro o codice. Per l'ombreggiatura del testo, ho anche applicato un offset verticale e ho impostato il colore sul bianco al 20% di opacità. Questo è un modo super semplice per creare un effetto letterpressed e far apparire il testo come se affondasse nel pulsante.
Utilizzare Il prefisso per i prefissi del browser
Si noti che il codice precedente non è affatto compatibile con il browser incrociato. Nelle fasi iniziali della sperimentazione, odio sgranocchiare il mio codice con una mezza dozzina di prefissi del browser e spesso dimenticare se un determinato browser ha o meno una sintassi unica.
Una volta che ho le cose che guardano come voglio in Espresso (il mio IDE preferito) usando la sintassi di base, posso sborsare tutto quel codice in un piccolo strumento gratuito chiamato Prefixr, che lo elaborerà e sputerà il mio codice con tutte le versioni specifiche del browser disponibili corrette aggiunte automaticamente.
01 02 03 a) La commissione per la 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .button {
/*Pa
ssaggio 2: Stili pulsante di base*/
dis
play:
b
locco
;
alt
ezza:
1
00px
;
larg
hezza
:
300px
;
con
testo:
#3
4696f
;
bor
do: rg
b
a s
o
lido
2
px(3
3,
6
8,
72
,
0,59
);
/*Pa
ssaggio 3: Stili testo*/
col
ore:
rgba(0
,
0
,
0
,
0,55
);
alli
neamento tes
to
: centr
o;
font
: gr
as
sett
o
3.2e
m
/100p
x
"Helvetica Neue"
,
Arial
,
Helvetica
, Ginevra,
sans-seri
f;
/*Pa
ssaggio 4: Stili CSS3 fantasiosi*/
sfo
ndo: -web
kit-linear-gradient(to
p,
#3
4696f,
#
2f5f63
);
sfo
ndo: -moz-
linear-gradient(superi
ore
,
#34696f
,
#2f5f63
);
sfon
do: -o-lin
eare-gradiente(superi
ore
,
#34696f
,
#2f5f63
);
sfo
ndo: -ms-
linear-gradient(top
,
#3
4696f,
#
2f5f63
);
sfon
do: gradie
nte lineare (super
ior
e,
#34696
f,
#2f5f6
3);
-ra
ggio bordo webkit:
50px
;
-kh
tml-border-radius:
50px
;
-mo
z-border-radius:
50px
;
rag
gio bordo: 5
0px
;
-we
bkit-box-shadow: 0
8
px
0
#1b383b
;
-mo
z-box-shadow: 0
8
px
0
#1b383b
;
box
-shadow: 0
px
0
#
1b383b
;
tex
t-shadow:
0
2
p
x 2
p
x r
gba(2
55,
2
55
,
255
,
0.2
);
}
/*Passaggio 3: Stile collegamento*/
a.button {
deco
razione del testo:
ne
ssun
o;
}
|
Anteprima passaggio 4
Dopo il quarto passaggio, il pulsante dovrebbe apparire molto più nitido di prima. Quasi finito!
Passaggio 5: Stili al passaggio del mouse
Il passaggio finale del processo del pulsante consiste nel definire il comportamento al passaggio del mouse. Quando l'utente passa il mouse sul pulsante, è sempre bello ottenere un piccolo feedback visivo che sia più della modifica predefinita del cursore. Ancora una volta, potremmo fare di tutto con questo, ma lo manterrò semplice e alleggerirò un po 'la sfumatura:
01 02 03 a) La commissione per la 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | .button {
/*Pa
ssaggio 2: Stili pulsante di base*/
dis
play:
b
locco
;
alt
ezza:
1
00px
;
larg
hezza
:
300px
;
con
testo:
#3
4696f
;
bor
do: rg
b
a s
o
lido
2
px(3
3,
6
8,
72
,
0,59
);
/*Pa
ssaggio 3: Stili testo*/
col
ore:
rgba(0
,
0
,
0
,
0,55
);
alli
neamento tes
to
: centr
o;
font
: gr
as
sett
o
3.2e
m
/100p
x
"Helvetica Neue"
,
Arial
,
Helvetica
, Ginevra,
sans-seri
f;
/*Pa
ssaggio 4: Stili CSS3 fantasiosi*/
sfo
ndo: -web
kit-linear-gradient(to
p,
#3
4696f,
#
2f5f63
);
sfo
ndo: -moz-
linear-gradient(superi
ore
,
#34696f
,
#2f5f63
);
sfon
do: -o-lin
eare-gradiente(superi
ore
,
#34696f
,
#2f5f63
);
sfo
ndo: -ms-
linear-gradient(top
,
#3
4696f,
#
2f5f63
);
sfon
do: gradie
nte lineare (super
ior
e,
#34696
f,
#2f5f6
3);
-ra
ggio bordo webkit:
50px
;
-kh
tml-border-radius:
50px
;
-mo
z-border-radius:
50px
;
rag
gio bordo: 5
0px
;
-we
bkit-box-shadow: 0
8
px
0
#1b383b
;
-mo
z-box-shadow: 0
8
px
0
#1b383b
;
box
-shadow: 0
px
0
#
1b383b
;
tex
t-shadow:
0
2
p
x 2
p
x r
gba(2
55,
2
55
,
255
,
0.2
);
}
/*Passaggio 3: Stili collegamento*/
a.button
2
{
deco
razione del testo:
ne
ssun
o;
}
/*Passaggio 5: Stili passaggio del mouse*/
a.button:passaggio del mouse {
con
testo:
#3
d7a80
;
sfo
ndo: -webk
it-linear-gradient(superi
ore
,
#3d7a80
,
#2f5f63
);
sfo
ndo: -moz-
linear-gradient(superi
ore
,
#3d7a80
,
#2f5f63
);
sfon
do: -o-lin
eare-gradiente(superi
ore
,
#3d7a80
,
#2f5f63
);
sfo
ndo: -ms-
linear-gradient(top
,
#3
d7a80,
#
2f5f63
);
sfon
do: gradie
nte lineare (super
ior
e,
#3d7a8
0,
#2f5f6
3);
}
|
Ora, quando si passa il mouse sul pulsante, il colore/luminosità si sposterà. È un effetto sottile ma è sicuramente abbastanza forte da far notare a qualsiasi utente, anche se sono daltoccati.
Finito!
Dopo il quinto passo, hai finito! Ora dovresti avere un bellissimo pulsante creato interamente con CSS e HTML. Ancora più importante, tuttavia, dovresti avere una forte sensazione che il flusso di lavoro di base segua per creare un pulsante usando CSS.
Demo: Per vedere il pulsante in azione, clicca qui o sull'immagine sopra.
jsFiddle: Per giocherellare con il codice, clicca qui.
Conclusione
Oggi abbiamo imparato molte cose molto importanti. Innanzitutto, abbiamo visto che possiamo usare un tag di ancoraggio HTML di base come punto di partenza per il nostro pulsante e che è bene stile pulsanti con classi riutilizzabili. Abbiamo anche imparato come iniziare a applicare uno stile a un pulsante di base che funzionerà bene su tutti i browser e a dare un tocco aggiunto in seguito piuttosto che basare l'intera struttura del pulsante su tecniche che non saranno ampiamente accessibili. Infine, abbiamo visto come mantenere le cose semplici codificando con le proprietà CSS3 di base fino a quando non otteniamo tutto bene, e poi lo seguiamo con un viaggio a Prefixr, che espande il nostro codice a qualcosa di il più compatibile con il browser.
Lascia un commento qui sotto e facci sapere cosa ne pensi. Se sei un principiante, è stato utile per te? Se sei un professionista regolare, cosa farei in modo diverso?