Hvordan lage knapper uten bilder i CSS

March 14

Før nettlesere begynte å legge CSS3, eller Cascading Style Sheets nivå 3, support, skaper en ikke-standardknapp nødvendig å åpne opp en grafikk editor og utforme den knappen som et bilde først med komplisert kode. I CSS3, kan du lage knapper med runde hjørner, gradienter og skygger uten bilder som er nødvendig. Selv om denne metoden bruker ganske få linjer med CSS-kode, vil det fortsatt gjøre websider raskere enn om du brukte bilder.

Bruksanvisning

1 Legg et par "<button>" koder i HTML for Web-side og gi dem et klassenavn. Plasser knappen teksten mellom dem:

<-knappen Class = "noimage"> My Button </ knapp>

2 Åpne CSS-stilark filen for Web-siden. Hvis det ennå ikke har en, lagre en tom fil som "mystyle.css" og legg denne koden etter "<title>" koder i websiden:

Lagre CSS-filen til samme mappe som din webside eller endre "href" for å matche banen til filen.

3 Lag en ny stil regel for knappens klasse:

.noimage {
}

4 Style den knappen med en bakgrunnsfarge og ny kant:

.noimage {
background-color: # ff0061;
border: 1px solid # a70040;
border-radius: 10px;
}

Dette eksemplet oppretter en hot-rosa knapp med en single-pixel-wide mørkere grensen. De "border-radius" eiendoms kurver grensen, større verdier i denne egenskapen indikerer mer avrunding.

5 Lag en gradient for knapp. Dette bidrar til å gi knappen et tredimensjonalt utseende:

background-image: lineær-gradient (topp, # ff0061, # b90047);
background-image: -webkit-lineær-gradient (topp, # ff0061, # b90047);
background-image: -moz-lineær-gradient (topp, # ff0061, # b90047);

Du trenger tre versjoner av gradient-kode, alle av dem den samme koden, men to med ulike nettleser prefikser. Den "-webkit" prefikset påvirker Chrome og Safari, mens "-moz" påvirker Firefox. Dette eksemplet oppretter en grunnleggende topp-til-bunn gradient.

6 Legg en skygge bak knappen ved hjelp av "box-shadow" eiendom:

box-shadow: 2 piksler 2 piksler 10px RGBA (0,0,0,0.2);

De to første verdiene offset skyggen fra venstre og toppen. Den tredje verdien angir hvor mye skygge uskarphet. En RGBA fargekode tar røde, grønne og blå verdier for farger, pluss en verdi fra 0 til 1 for opasitet. Eksempelet viser svart med en tetthet på 20 prosent.

7 Stil teksten i knappen. Endre farge, font og skriftstil etter behov. Tilsett en dråpe skygge på teksten ved hjelp av "text-shadow":

color: # ffffff;
font-style: Georgia, serif;
font-weight: bold;
text-shadow: 1px 1px 3px RGBA (0,0,0,0.2);

"Text-shadow" eiendom fungerer på samme måte som "box-shadow".

8 Gi knappen noen padding størrelsen det i forhold til teksten:

padding: 15px 10px;

Den første verdien er horisontal polstring, mens den andre verdien er vertikal. Her er det ferdige knappen kode:

.noimage {
background-color: # ff0061;
border: 1px solid # a70040;
border-radius: 10px;
background-image: lineær-gradient (topp, # ff0061, # b90047);
background-image: -webkit-lineær-gradient (topp, # ff0061, # b90047);
background-image: -moz-lineær-gradient (topp, # ff0061, # b90047);
box-shadow: 2 piksler 2 piksler 10px RGBA (0,0,0,0.2);
color: # ffffff;
font-style: Georgia, serif;
font-weight: bold;
text-shadow: 1px 1px 3px RGBA (0,0,0,0.2);
padding: 15px 10px;
}

Hint

Legg klassenavnet du opprettet for knappen til en annen knapp du ønsker å revidere denne imageless stil.