Izdelava gumba v CSS

Avtor: aleksy | Objavljeno: dne 3. maj 2013, 12:05

Odpremo naš priljubljen urejevalnik kode (jaz uporabljam Sublime Text 2) in ustvarimo dve datoteki:

index.html in

styles.css

V datoteko index.html najprej zapišemo:

S tem smo našo datoteko povezali z css datoteko, ki vsebuje sloge za ta dokument.

Spodaj pa dodamo še:

Če smo vam pomagali, se nam zahvalite!<a href="" class="button">Zahvali se!</a>

Seveda lahko tekst spremenite po svojih potrebah.

Tako, zdaj smo ustvarili osnovo za naš gumb.

Če si stran pogledamo v brskalniku, bo izgledala tako kot na sliki na levi. Ni videti lepo, kajne? To bomo v nekaj korakih spremenili.

Zdaj odpremo datoteko styles.css, ki smo jo prej povezali z index.html in vanjo zapišemo:

.button

{

background: #EEE;

padding: 5px 10px;

color: #333;

text-shadow: 1px 1px 1px #FFF;

text-decoration: none;

border-radius: 3px;

border: 1px solid #DDD;

border-bottom-width: 3px;

line-height: 33px;

}

Če ponovno odpremo index.html v našem brskalniku, bomo videli rezultat.

Ta lekcija je samo osnova za vaše nadaljne ustvarjanje. Če se boste še malo poigrali z datoteko CSS, lahko gumb priredite svojim potrebam na spletni strani. Bodite kreativni! :)


	Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.

Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!


Zmaga.com na Facebooku \| Pošljite nam e-pošto \| Informacije o Zmaga.com