Hogyan hozzunk létre egy lebegő gombot a weboldal html css
Bizonyára láttál sok honlapok gombok mozognak az oldalt tekercset. Gyakori példát a fenti gombok lehet akció, egy hívás, megrendelés vagy nyilat, amely lehetővé teszi, hogy felfelé.
A működési elve az ilyen gombok alapul képessége összesen: fix; Tekintsük html szerkezet az alábbi:
Létrehoztunk egy egyszerű gomb osztály fixedbut, amely kijelölt stílus. A stílus a legfontosabb tudnivaló a helyzet ingatlan: fix; - lehetővé teszi a gomb mindig „úszik” képernyő-oldalon, és alul: 20px; jobbra: 20px; telepíteni az alsó, a jobb oldalon. Gombot, hogy a bal szélén a változás jogát a bal oldalon. Más stílusok szépség.
De a gomb nem aktív per click. Adjunk átmenet bármely oldalon, kattintson rá. Ezt meg lehet tenni az alábbiak szerint:
vagy egy normális kapcsolat:
Ha kell a gombot fel, akkor mindkét esetben a referenciaérték helyébe #. Oldal Visszatekertem tetején, ha rákattint a gombra.
Vegyünk egy pár zsemlét, ami lehet hasznos, nem csak ebben a projektben.
1. A gomb (és minden olyan tételt, amely hozzárendelhető pseudo: hover) fokozatosan változtatja a színét, adjunk hozzá az osztály fixedbut tulajdonság: -webkit-átmenet: 0.33s minden kiúsztatás; -o-átmenet: 0.33s összes kiúsztatás; átmenet: 0.33s minden könnyű-out;
2. Ha kell tiltani a működését linkre kattintva vagy a forgatókönyvet, add az ingatlan: pointer-events: none; Például, ha rákattint a linkre: Bónusz! linkre kattintva nem történik meg.
3. adja a target = „_ blank”, ha rákattint a linkre, az oldal megnyílik egy új lapon.
lásd még
- Lebegő menü az oldalon a CSS
- Hozzon létre egy ablakot a képernyő közepén JQuery + css: pozíció abszolút
- Kap kijelöl egy CSS stílus JQuery
- Hogyan változtassuk meg a sorrendben a div blokk a mobil változat miatt css
