Hvordan lage egendefinerte knapper for nettsider
Alle knappene nettlesere stil forskjellig, men du kan lage dine egne stiler for å gjøre knappene matche din Web-design og ser flott ut i de fleste nettlesere. Du trenger en kombinasjon av HTML og Cascading Style Sheet (CSS) koden for å lage egendefinerte knapper. Alternativene er nesten ubegrenset, og bruk av CSS level 3 (CSS3) egenskaper som "border-radius" og "box-shadow" gjør det enkelt å lage avrundede knapper med en tredimensjonal følelse.
Bruksanvisning
1 Åpne HTML-fil i en kode editor eller Microsoft Notisblokk. Skriv inn følgende kode for å lage din knapp:
<-knappen Type = "button" class = "stilig"> Knapp Text </ knapp>
2 Åpne ekstern CSS-fil, eller skrive CSS mellom "<style>" tags ligger i hodet av HTML-fil. Skriv dette for å målrette noen knapp med klassen navnet "stilig":
.stylish {}
3 Sett bakgrunnen og grense egenskaper for knappen i CSS. Nettlesere allerede stil knapper med en grå bakgrunn og en skrå kant, så du må overskrive at styling. Denne koden setter disse egenskapene:
.stylish {
bakgrunn: # ff0000;
border: 1 piksler solide # cc0000;
}
Ovennevnte kode oppretter en knapp med en lys rød bakgrunn og en mørkere rød, én piksel bred grensen.
4 Stil skriften for knappen som dette:
.stylish {
bakgrunn: # ff0000;
border: 1 piksler solide # cc0000;
font-family: Arial, sans-serif;
font-weight: bold;
font-style: italic;
color: # ffffff;
}
Koden ovenfor setter knappen teksten å bruke "Arial" font i fet kursiv og bruker fargen hvit.
5 Lag avrundede hjørner for knappen ved hjelp av "border-radius" eiendom, som følger:
.stylish {
border-radius: 20px;
}
6 Gi knappen en gradient bakgrunn for å gjøre det vises tredimensjonalt. Her er koden:
.stylish {
bakgrunn: # ff0000;
bakgrunn: lineær-gradient (topp, # ff0000, # 990000);
bakgrunn: -webkit-lineær-gradient (topp, # ff0000, # 990000);
}
Du må bruke både "lineær-gradient" og "-webkit-lineær-gradient" for å gjøre gradient arbeid i Chrome 11. Sett en enkelt farge bakgrunnen først for nettlesere som ikke støtter gradienter. Du kan også lage en gradient bilde og sette bakgrunns som dette:
bakgrunn: URL (sti / til / gradient.png) # ff0000;
7 Sett en skygge på knappen for å gi den mer dybde. Her er koden:
.stylish {
box-shadow: # 550000 2 piksler 2 piksler 10px;
}
Den heksadesimale koden "# 550000" skaper en mørk rød farge for skygge. De neste to verdiene bestemmer forskyvningen fra toppen og til venstre for knappen. Den siste verdien er blur radius som styrer hvor mye uskarphet du ønsker for skyggen.
Hint
- Egenskaper som "border-radius" og "box-shadow", sammen med de lineære gradienter, fungerer ikke i eldre nettlesere. Vurdere å tillate dine Web-design for å degradere i disse nettleserne, slik at en besøkende bruker Internet Explorer 8 vil se en solid knapp med ikke-avrundede hjørner.