Avtor: -primož- 18.11.09

V tem vodiču vam bom predstavil kodo s katero se lahko znebite običajnega izgleda gumba in gumb s CSSjem uredite, tako, kot hočete. Gumbu lahko po želji spremenite ozadje in uporabite svoje slike, lahko urejate bededilo, ki je v njem (barva, pisava, kurzor).

Gumb s sliko za ozadje

Če želimo obiskovalce spletne strani še posebej pritegniti in jih prepričati, naj kliknejo na gumb, je zelo dobro, če gumb naredimo privlačen. Spodaj imate kodo, ki vam pokaže, kako lahko namesto gumba uporabite sliko (, kot ozadje). Uporabite tako sliko, da se bo vedelo, da je gumb in da bo klik obiskovalca nekam preusmeril oz. mu kaj ponudil.

HTML in CSS koda:

<html><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">

.gumb{
border: none;
background: url(submit1.png);
cursor:pointer;
height: 171px;
width: 200px;
}

.gumb:hover{
background: url('/submit2.png');
}

</style>

</head>

<body>

<input class="gumb" type="submit" value="" name="potrdi"/>

</body></html>

PRIKAZ: gumb in slika za ozadje

Razlaga kode:

.gumb{} - CSS koda za obliko gumba

.gumb:hover{} - CSS koda za obliko gumba, ko je miška nad gumbom

border: - obroba

background: - določite sliko za ozadje (vse o urejanju ozadja)

cursor: - tukaj lahko zamenjate izgled kurzorja (več o kurzorjih).

height: - višina

width: - širina

*širino in višino prilagodite velikosti vaše slike.

class="gumb" - gumbu določimo stil

type=" " - kakšna vrsta obrazca je ... v našem primeru je gumb

value=" " - kaj bo v gumbu pisalo (če je besedilo v sliki pustite atribut prazen! )

CSS urejanje besedila in ozadja

Če vaša stran predvideva gumb v obliki besedila lahko uporabite spodnjo kodo, ki vam pokaže, kako spremeniti barvo besedila, pisavo, kurzor, ... ).

HTML in CSS koda:

<html><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">

.gumb{
border: 2px solid #ff0000;
background: #a90000;
cursor:pointer;
color: #fff;
font-family: Trebuchet MS;
height: 50px;
letter-spacing: 3px;
width: 130px;
}

.gumb:hover{
background: #ff0000;
font-weight: bold;
}

</style>

</head>

<body>

<input class="gumb" type="submit" value="Pošlji" name="potrdi"/>

</body></html>

PRIKAZ: gumb z urejenim ozadjem in besedilom

Razlaga kode:

.gumb{} - CSS koda za obliko gumba

.gumb:hover{} - CSS koda za obliko gumba, ko je miška nad gumbom

border: - obroba

background: - določite barvo za ozadje

cursor: - tukaj lahko zamenjate izgled kurzorja

color: - barva besedila

font-family: - pisava

letter-spacing: - razmik med znaki (črkami)

class="gumb" - gumbu določimo stil

type=" " - kakšna vrsta obrazca je ... v našem primeru je gumb

value=" " - kaj bo v gumbu pisalo

Komentiraj:

Sorodni vodiči
DIV z drsniki CSS kode 1 Vodoraven CSS meni CSS galerija 650 Flyout meni	Poseben CSS za Internet Explorer CSS Osnove 6 CSS namigov CSS Kode 2 CSS okvir na sredini, s slikami

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

Gumb s sliko za ozadje

CSS urejanje besedila in ozadja

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči