Замяна на бутон с картинка

[borislav123]

Колеги

кажете CSS начин за замяна на Субмит бутон с картинка - jpg

ако може да работи добре под всички браузъри

PS. но да НЕ е фон зад текста, а да замени целия бутон

 

[vkusno]

За: Замяна на бутон с картинка

За: Замяна на бутон с картинка

Например това?

<input type="image" src="/library/graphics/image.gif" onsubmit="submit-form();"/>

 

[Rimodar]

За: Замяна на бутон с картинка

За: Замяна на бутон с картинка

Или пък <input class="button" .... />
. button { background:url();....}

 

[Poltargaista]

За: Замяна на бутон с картинка

За: Замяна на бутон с картинка

В CSS файла:

form input[type=submit] {
	background : url("submit.png") no-repeat center center;
	width : 115px;
	height :52px;
	border : none;
	color : transparent;
	font-size : 0
}

И естествено при Hover:

form input[type=submit]:hover {
	background : url("submit-hover.png") no-repeat center center;
}

Единствено имам опасения, че при Safari има някакви ядове с това, но не съм пробвал.

 

[cloxy]

Re: Замяна на бутон с картинка

Вариантът на @vkusno е най-правилният според мен, а и е стандартизиран.

Другият вариант е просто да си вкараш снимката по нормално и да ѝ сложиш:

onclick="document.forms[0].submit()"

 

[Poltargaista]

За: Замяна на бутон с картинка

За: Замяна на бутон с картинка

Най-стандартизиран, но при неговия вариант как се прави on hover?

 

[cloxy]

Re: За: Замяна на бутон с картинка

Re: За: Замяна на бутон с картинка

Най-стандартизиран, но при неговия вариант как се прави on hover?

Не те разбирам точно. Защо трябва да реагира на hover? Ако се налага, може примерно така:

onmouseover="this.src='img.png';"