Hozz létre egy css gombot az oldalon, sokoblog
1. Online szolgáltatások a CSS gombok létrehozásához.
Az interneten nagyon jó online szolgáltatások állnak rendelkezésre a CSS gombok létrehozásához:
2. Részletesebben létrehozunk egy CSS gombot az "css-tricks.com/examples/ButtonMaker/" online szolgáltatás használatával.
A szolgáltatás kódját letöltheti webhelyemről - töltse le a CSS gombok létrehozására szolgáló szolgáltatást.
A jobb oldalon van egy gomb létrehozására szolgáló eszköz:- Csúszkák - állítsa be a gomb méretét és a sarkok kerekítését;
- Top Gradient Color - a felső gradiens színe;
- Alsó Gradiens Szín - az alsó gradiens színe;
- Felső határszín - a gomb felső határa;
- Hover Background Color - a gomb színe, amikor fölé hajlik;
- Szövegszín - a szöveg színe;
- Hover Text Color - a szöveg színét, amikor a gomb felett lebegnek;
- Aktív háttérszín - a gomb színét, ha rákattintasz.
A bal oldalon - láthatod, milyen a CSS gomb, és ha rákattintasz, látni fogod a másolni kívánt gomb CSS kódját, alapértelmezés szerint így néz ki:
Itt véleményem szerint minden tökéletesen látható - mi a felelős a gomb CSS kódjában:
Először is, a gomb három állapotban van:
1. A gomb nyugodt;
2. Ha az egér a gomb fölé van lebegve, a lebegtető osztály felelős azért;
3. Amikor kattintson a gombra - ez felelős az aktív osztály (ebben az osztályban, akkor szinte nem látni, de ha a késleltetés hatása, ha összeköti - élvezheti azt a teljesen).
Ennek megfelelően mindegyik osztálynak (felfüggesztve, aktívnak) saját regisztrációs stílusa van a gomb (háttér) háttérszínének, a szöveg színének stb.
Másodszor, ez a kód mutatja a különböző tulajdonságok használatát:
gradiens - a gradiensért felelős,
sugár - a gomb sarkainak kerekítése,
árnyék - árnyékok,
A következő az, hogy kapcsolatot hozzon létre az osztály buttom (alapértelmezés szerint ez jelen gombra a CSS-kód), és illessze be, ahol szeretnénk látni ezt a gombot, például, akkor hozza létre az oldalsávban - a telek ránk wordpress - vezérlőpanel a bal oldali menüben „megjelenése”, a sub „Widgets”, válassza a widget nevű „szöveg”, és húzza azt az oldalsávon, majd előírja a következőket közli:
Végül a következő gombbal jutunk el:
PS: Egyes témák már használják a "gomb" osztályt a stílusukban, ezért jobb, ha valami eredetire változtatjuk, például hozzáadjuk a számokat - "button777" ...