1. Opprett en ny HTML-dokument.
2. Hvis du bruker Adobe Dreamweaver så aktiv
kodevisning (se bilde)
3. Gå et sted mellom. < head > og < /head > tags.
4. Skriv eller snarere kopier /lim inn følgende kode:
< style > a.css-knappen {font-size: 30px; color: # 000; text-decoration: none; display: block; bredde: 350 piksler; padding: 5px; border: 1px solid #DDD; text-align: center;
-moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
bakgrunn: #FFFFFF; bakgrunn: -webkit-gradient (lineær, 0% 0% 0% 100%, fra (#FFFFFF), til (#EEE)); bakgrunn: -moz-lineær-gradient (0% 90% 90deg, #EEE, #FFF);
-webkit-overgang: alle .4s ease-in-out; -moz-overgang: alle .4s ease-in-out; -o-overgang: alle .4s ease-in-out; overgang: alle .4s ease-in-out; } A.css-knapp: hover {color: #fff; border-color: # 3278BE;
bakgrunn: # 4195DD; bakgrunn: -webkit-gradient (lineær, 0% 0% 0% 100%, fra (# 4195DD), til (# 003C82)); bakgrunn: -moz-lineær-gradient (0% 90% 90deg, # 003C82, # 4195DD); } A.css-knapp: active {bakgrunn: # 4195DD; bakgrunn: -webkit-gradient (lineær, 0% 0% 0% 100%, fra (# 003C82), til (# 4195DD)); bakgrunn: -moz-lineær-gradient (0% 90% 90deg, # 4195DD, # 003C82); }
a.css-button.notransitions {-webkit-overgang: none; -moz-overgang: none; -o-overgang: none; overgang: none; } < /style >
5. Hvis du er en Dreamweaver bruker, aktivere Design
Vis
Hvis du ikke er en Dreamweaver bruker enn bare legge disse to koblingene i den. < body > tags på HTML-dokumentet:
< p > < a href = "http://www.dreevoo.com/category.php?id=120" > Dreevoo.com overgangs < /a > < /p >
< p > < a href = "http://www.dreevoo.com/category.php?id=119" > Dreevoo.com ingen overgang < /a > < /p >
... og gå rett til trinn 10 av opplæringen
6. Skriv inn to ord eller ordkombinasjoner, hver i en egen rad..
7. Velg den første.
8. Into the Link feltet angi en url du vil at knappen til å peke på (se bilde).
9. Gjør det samme for den andre raden.
Gå tilbake til kodevisning.
10. Gå inn < body > tags der koblingene er opprettet (se bilde).
11. Legg class = "css-knappen" (se bilde).
12. Og til den andre linken ass class = "css-knappen notransitions" (se bilde).
13. Lagre dokumentet og sjekke ut hvordan det ser ut i nettleseren din.
Trykk F12 hvis du er en Dreamweaver bruker.
14. Hvis du kjøre musen /pekeren over den første knappen, bør en kort overgang skje før farge spark i.
andre man bør slå umiddelbart blå.
Sjekk ut mine avrundet CSS knappene i aksjon.
nå spille med koden og dets attributter og se hva som skjer. Hvis du trenger litt hjelp eller tips, er du mer enn velkommen til å bruke forumet eller kommentarer under.
<