Hvordan lage en full CSS Button

Hvordan lage en full CSS Button


Ved hjelp av CSS-kode, kan du skape attraktive, fleksible og funksjonelle knapper uten bogging ned din nettside med unødvendige grafikk. CSS har to kantlinjer, innfelt og begynnelsen, som er ideelt for å skape en hevet knapp og en trykket knappen effekt. Men disse stilene er ikke de eneste alternativene som er tilgjengelige. Du kan også lage flate knapper og legge til et element for å understreke knappen mens svever med musa.

Bruksanvisning

1 Skriv inn koblingen tekst (<a href>) med et mellomrom (& nbsp;) mellom hvert ledd for knappene i kroppen (<body>) i HTML-dokumentet. Tildele samme klasse til hver kobling.
For eksempel inneholder følgende kode fem knapper. Bytt ut "#" med ønsket link. Klassen for hver kobling er "-knappen.» Ordene som skal vises på knappene Get, der, hvis du og Can. Erstatte disse ordene med ordene du ønsker å ha på knappen.

<Body>
<P>
<a href="#" class="button"> Få </a>
<a href="#" class="button"> Det </a>
<a href="#" class="button"> Hvis </a>
<a href="#" class="button"> Du </a> & nbsp;
<a href="#" class="button"> Kan </a>
</ P>
</ Body>

2 Type stil koder i header (<head>) delen av dokumentet ditt under HTML header koder og over eventuelle Javascript-koder.

Stil Tags:
<Style type = "text / css">
<! -

->
</ Style>

3 Skriv klassen "knappen" på den blanke linjen mellom stil koder. Bruk "a.button" for å bruke innstillinger til noen <a> tag med "knapp" klasse. Skriv inn innstillingene for knapp. Instruksjonene inne kommentar tags /

/ Beskrive for deg hva koden forteller nettleseren din å gjøre. Nettleseren din ignorerer Informasjonen i kommentarkoder.
Knappeinnstillinger:
a.button / Følgende innstillinger gjelder for noen tagger med klassen satt til knappen. /
{
bakgrunn: # 88bbee; / Sett bakgrunnen til hex farge # 88bbee. /
border: 2px # 88bbee begynnelsen; / Set grensen bredde til to piksler, farge grensen til hex # 88bbee og linjestilen til begynnelsen. /
padding: 1px 4px; / Pad lenken ved en piksel på toppen og bunnen sider og fire piksler på venstre og høyre side. /
color: black; / Koblingen tekstfargen er svart. /
text-decoration: none; / Legg ingen dekorasjoner til koblingsteksten. /
font: fet 15px Arial, Verdana, Helvetica, sans-serif; / Set skriften bredde til fet, skriftstørrelse til 15 piksler og font til Arial. Hvis Arial er tilgjengelig, bruker Verdana, andre bruke Helvetica, andre bruke san serif i den rekkefølgen. /
width: 100px; / Set bredden på knappen til 100 piksler (IE only). /
text-align: center; / Senter koblingen tekst i knappen. /
}

4 Skriv inn "svever over linken" innstillinger under knappeinnstillingene mellom stil koder. Hensikten med alle disse endringene er å gi inntrykk av en knapp trykkes inn.
Hover Innstillinger:
a.button: hover /

Følgende innstillinger gjelder for noen tagger med klassen satt til knappen når en bruker svever over elementet med musen /.
{
border-style: innfelt; / Grensen stil endringer fra begynnelsen for nedfelling. /
background-color: # 99ccff; / Bakgrunnsfargen endres fra hex # 88bbee til hex # 99ccff, som er en lysere farge. /
padding: 2px 3px 0 5px; / Padding endringer fra én piksel av fire piksler til to piksler av tre piksler. Dette forskyver teksten én piksel til høyre og én piksel ned. /
text-transform: store bokstaver; / Endringer tekst til store bokstaver. /
}

5 Skriv inn besøkt linken og aktiv lenke innstillinger under hover innstillinger mellom stil koder.

Besøkte og Aktive innstillinger:
a.button: besøkt / Denne innstillingen gjelder for knappene etter at de har blitt klikket /.
{
color: black; / Hold fargen på koblingsteksten svart /
}

a.button: aktiv / Denne innstillingen gjelder for aktive knapper /.
{
color: black; / Hold fargen på koblingsteksten svart /
}

Hint

  • Redigere noen av innstillingene i henhold til dine preferanser for å lage dine egne knapper. Knapper trenger ikke å vises 3-D; kanskje du foretrekker en flat knapp med et fast eller dobbeltramme. Bruk text-transform eiendom for å forvandle koblingen tekst fra små bokstaver til store bokstaver på hover. Det er mange alternativer tilgjengelige.