Hvordan lage effekter for ditt nettsted Knapper

Hvordan lage effekter for ditt nettsted Knapper


Legge til effekter til hjemmeside knapper kan ta et ellers statisk design og gjøre den mer dynamisk og brukervennlig. Tradisjonelt webdesignere brukt bilder eller Adobe Flash Professional til å lage knapper med effekter. Men du kan oppnå en dynamisk effekt med noe mer enn noen få linjer med CSS og HTML-kode.

Bruksanvisning

Lag en Cascading Style Sheet (CSS)

1 Åpne et nytt vindu i ren tekst editor.

2 Definer en klasse samt stil egenskaper for nettstedet knapper. For eksempel skaper følgende kode på "navigationBar" -klassen, som vises som en blokk med en hvit bakgrunnsfarge:

.navigationBar {display: block; background-color: #FFFFFF; }

3 Tilsett "svever" effekt på knappen. Følgende kode vil gjøre bakgrunnsfargen på en knapp i "navigationBar" class grå når brukeren beveger musa over det:

.navigationBar: hover {display: block; background-color: # 999999; }

4 Lagre ren tekst-fil med en Css forlengelse. For eksempel kan du navngi filen "-knappen-effects.css".

Rediger HTML-koden

5 Åpne HTML webside i en vanlig tekst editor.

6 Koble CSS fil med HTML-webside. For eksempel, hvis du heter din CSS fil "-knappen-effects.css", sette inn følgende kode i <head> delen av nettsiden din:

<Link rel = "stylesheet" type = "text / css" href = "button-effects.css">

7 Lag et nettsted knapp som samsvarer med klassen i CSS-koden. For eksempel, hvis din CSS-koden inneholder "navigationBar" class, følgende kode, satt inn i <body> -delen av nettsiden, vil skape en knapp i den klassen:

<Div class = "navigationBar"> Om oss </ div>

8 Lagre HTML-fil, og oppdatere den i en nettleser for å se resultatene.

Hint

  • For å slå knappen til en hyperkobling, bare skrive bokstaven "a" etter klassenavnet i CSS-kode og sette inn hyperlink kode rundt teksten i knappen i HTML-filen.
  • Hvis websiden din er lastet opp til en webserver, vil du også nødt til å laste opp din CSS-fil. Du må også endre banen i <link> -delen av HTML for å reflektere den absolutte banen til CSS-filen.