Buttons

Primjeri buttona sa tri stanja pokretana css-om

Na ovoj stranici je nekoliko primjera buttona koje sam do sada napravio i upotrebljavao. Ovdje prikazani su dizajnirani u photoshopu, embedani u html i pokretani css-om. Svaki button ima 3 stanja: default, mouse over i active. Također, tu je i primjer buttona sa disabled stanjem. Kao što sam već rekao buttoni si pokretani css-om, što je najbolji način i ima svoje velike prednosti. Najveća je što se učitava samo jedna, zajednička, slika za sva stanja buttona, a poslije se samo css-om regulira pozicija željenog dijela slike koji se treba prikazati. To olakšava i ubrzava prikaz buttona, i neće se dogoditi da nemamo učitanu sliku za određeno mouse over stanje. Na primjer, ovdje vidimo kako izgleda slika prvog objavljenog buttona, sva 4 stanja su na jednoj slici:



css tada podešava koji dio slike da se učita za određeno stanje.

input.button1 {
	background: url(../images/button_1.png) no-repeat 0px 0px;
	border: none;
	color: #FFF;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	height: 40px;
	margin: 0;
	padding: 0 2px;
	vertical-align: top;
	text-align: center;
	white-space: normal;
	width: 150px;
	}
input.button1:hover {
	background: url(../images/button_1.png) no-repeat 0px -40px;
	}
input.button1:active {
	background: url(../images/button_1.png) no-repeat 0px -80px;
	}
input.button1[disabled] {
	background: url(../images/button_1.png) no-repeat 0px -120px;
	}