Hvordan lage Button Linker for et nettsted
Hvis noen ber deg om å skissere en Web-knapp på papir, kan du tegne et rektangel og skrive litt tekst inni den. Nettlesere vite for å lage knapper når du legger knapp koder til HTML-dokumenter. En måte å krydre opp en webside er å endre måten koblingene vises. For eksempel, hvis du ønsker en link til å se ut som en stilisert knapp, kan du bruke CSS til å endre koblingen utseende.
Formater Anchor Tag
CSS klasser skape mye av den visuelle magi du ser på Internett. Velg riktig CSS attributt, og du kan gjøre alt fra å sette en stiplet ramme rundt et avsnitt for å legge til et bakgrunnsbilde til en knapp. Begynn å tilpasse en av ankerkoder ved å gjøre HTML-koden ser slik ut:
<a class="linkButton" href="Visit" rel="nofollow" target="_blank"> http: //www.someWebSite.com"> besøke vår butikk betaler.
Bytt http://www.someWebsite.com med nettadressen til nettstedet du vil at folk skal besøke når de klikker på linken knappen. Endre "Vår store" i teksten du ønsker din link skal vises.
Legg CSS attributter
Lag linkButton Class at ankeret tag referanser ved å lime inn følgende kode inn i HTML-dokumentet stil seksjon eller inn i et eksternt stilark dine dokumentreferanser:
.linkButton {display: block; text-align: center; vertical-align: middle; padding: 10px; width: 110px; height: 30px; border-style: solid; border-color: blue; farge: lilla; background-color: gul; }
Denne koden setter din link visningsstil for å blokkere, justerer teksten, setter polstring rundt teksten til 10 piksler og justerer knappen bredde og høyde. Disse verdiene er 110 piksler og 20 piksler.
Juster CSS attributtverdier
Endre noen av attributtverdier i linkButton å oppnå den effekten du ønsker. Padding refererer til hvor mye plass mellom koblingen tekst og tilstøtende kanter. Øke verdien å øke polstring og redusere verdien for å redusere polstring. Grense-stil og border-fargeattributter satt knappens grensen stil og farge. Andre mulige verdier for border-stil inkluderer prikkete, stiplede og dobbel.
Se Link Button
Lagre HTML-dokument, se den i en nettleser og du vil se en knapp med en gul bakgrunn og lilla tekst. Knappen grense er blå og dens dimensjoner er de verdiene du angir for høyde og bredde. Klikk på knappen og nettleseren navigerer til nettadressen du angir for kobling href attributt.
Bring på spesialeffekter
Som vanlige lenker, kan knappene endre utseendet når du kommuniserer med dem. CSS pseudo-klasser gjør det mulig. Legg til følgende pseudo-klasser til HTML-dokumentet stil seksjon:
a: besøkte {background-color: pink;}
a: hover {background-color: Lys grønn;}
a: active {background-color: orange;}.
Den besøkt pseudo-klasse endrer lenken knappen bakgrunnsfarge til rosa etter noen besøker link. Hover pseudo-klasse endrer lenken knappen bakgrunnsfarge til Lys grønn når du holder musa over knappen. Til slutt, endrer besøkte pseudo-klasse lenken knappen bakgrunnsfarge til oransje kort når et nettsted besøkende klikker på knappen. Endre attributter for disse klassene etter behov. For eksempel, hvis du vil at koblingen knappen bredde for å endre til 200 piksler og sin background-color for å endre til Lys grønn på en hover hendelse, legger en bredde attributt til hover pseudo-klasse, som vist her:
a: hover {background-color: Lys grønn; width: 200px;}
Bilder og Link Knapper
Link tekst er nyttig fordi det gjør at du vet hvor linken tar deg før du klikker på den. I dette eksempelet besøkende se "besøke vår butikk" som link-knappen tekst. Men det er mulig å bruke et bilde som link-knappen bakgrunn. Det bildet vil vises bak knappens vanlig tekst. Legg til et bilde bakgrunn til din link knappen ved å lime inn følgende CSS-kode på slutten av linkButton klasse:
bakgrunn: url (IMAGE_URL);
background-size: 70 piksler x 50 piksler;
background-repeat: no-repeat;
Bytt IMAGE_URL med nettadressen til et bilde på Internett eller på webserveren. Bytt 70 piksler og 20px med bredden og høyden du ønsker bildet skal være. Sørg for at bildet er lite nok til å passe inne knappen. Du kan også bruke et bilderedigeringsprogram, for eksempel Microsoft Paint. Paint.Net eller Pixlr.com, å tegne et bilde.
bilde~~POS=TRUNC tips
Bakgrunnen-size-attributtet justerer størrelsen i henhold til de verdiene du angir for background-størrelse. Selv om dette fungerer, vil websiden lastes raskere hvis du endre størrelsen på bildet manuelt ved hjelp av bilderedigeringsprogram. Rådfør deg med søknader hjelpedokumentasjonen hvis du trenger hjelp å lære hvordan å endre størrelsen på et bilde.