Hvordan lage en knapp Glow på nettet

Legge til spesialeffekter og interaksjoner til knappene på nettet hjelper samtalen brukernes oppmerksomhet til handlinger som registreringer eller kjøp. Siden knapp design påvirker brukeratferd i en slik grad, hvordan du designe knappene gjør en stor forskjell i hvor effektive design vil bli. Glow effekter, for eksempel, kan ta et nettsted besøkendes øyne, og du kan opprette denne effekten ved hjelp av en linje av CSS (Cascading Style Sheet) kode. Ved hjelp av CSS, kan du selv gjøre gløden vises kun når brukeren plasserer markøren over knappen.

Bruksanvisning

1 Åpne websiden i Notepad og finn knappen koden. Avhengig av funksjon og plassering på siden, vil koden enten bruke en "<input>" tag eller en "<-knappen>" tag, med førstnevnte er mer vanlig i webskjemaer. Få ID navnet på knappens tag eller legge til en ID:

<Input type = "submit" id = "MyButton" />

<-knappen Id = "MyButton"> Knapp Text </ knapp>

2 Gå til toppen av koden for websiden og se etter "<style>" tags. Legg dem under "<link>" eller "<title>" koder hvis du ikke ser noen:

<Style type = "text / css">

</ Style>

Skriv din stil kode mellom "<style>" koder eller i en ekstern CSS-fil hvis nettstedet allerede bruker det.

3 Skriv dette for å gjøre knappen glød rundt kantene:

MyButton {

box-shadow: 0 0 20px RGBA (255,255,0,0.3);

}

Koden ovenfor legger en skygge til knappen, men siden både topp og venstre forskyvninger er satt til null piksler, blir det en skygge som omgir hele knappen. Endre den tredje verdien til mengden av sløring du vil, med høyere tall produsere mer uskarphet. Den "RGBA ()" code tar røde, grønne og blå fargeverdier pluss en grad av gjennomsiktighet. Dette eksemplet bruker gul satt til 30 prosent gjennomsiktighet.

4 Gjør gløden bare vises på en hover eller "roll-over" state ved å legge til ": hover" psuedo-klassen etter knappens ID navn:

MyButton: hover {

box-shadow: 0 0 20px RGBA (255,255,0,0.3);

}

Hint

  • Legg til "innfelt" foran den første verdien for "box-shadow" for å gjøre den gløden vises inne knappen i stedet for rundt kantene.
  • Style knappens bakgrunn, farge og font før du legger en glød effekt, ellers gløden vises kanskje ikke, spesielt når skinnet er innfelt.