HTML knapp som konverterer best del 2

Husker du HTML knappen som konverterer best? I fjor skrev vi om Eric Graham som hadde testet mye, og konkludert med en klar vinner. Nå har vi etter spørsmål fra en leser bygget om knappen for deg som vil bruke den som en vanlig knapp.

Først, en kort oppfriskning:

Her er HTML-knappen som gir best resultat med tanke på click-through-rate:

Knappen skal være stor, og ha en farge-ramme rundt som skifter farge, gjerne fra rød til grønt når man fører musepilen over. Dette fører til at folk "stopper opp" og instinktivt klikker.

Forrige gang var dette en HTML submit-knapp for skjema, og nå fikk vi spørsmål om hvordan man kan gjøre den om til en "vanlig knapp" som åpner en ny nettside.

Sist gang la jeg ikke ved koden heller, så nå gjør jeg det 😉

Dette skal i din CSS fil (evt øverst i HTML filen mellom <head> og </head>:

.submit {

border: 1px solid #000000;

background-color: #FFFFFF;

padding: 2px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12px;

cursor: default;

}

#submitpad {

padding: 5px;

background-color: #ff0000;

margin: 0px;

border-width: 3px;

border-color: #ff0000;

border-spacing: 0;

}

Deretter skal denne HTML koden inn i din HTML, der du vil ha knappen:

				

		<table border="0" cellspacing="0" cellpadding="0">

		

		<tr>

		

		<td nowrap id="submitpad"

		

		onMouseDown="this.style.backgroundColor='#009900'"

		

		onMouseOver="this.style.backgroundColor='#009900'"

		

		onMouseOut="this.style.backgroundColor='#ff0000'">

		

		<span style="cursor:pointer;">

		

		<input name="submit" type='button' style="cursor:pointer; font-size: 16px;" ONCLICK="window.location.href='http://estrategi.no'" value='Send meg til Estrategi! &gt;&gt;'/></span></td>

		

		</tr>

		</table>

Det var alt.

Dvs, hvis du skal lime inn CSS koden i HTML filen din og ikke i CSS fil, så må du lime inn start og slutt for CSS, slik at koden blir seende slik ut:

<style type="text/css">

<–

css kode som over her

–>
		</style>


	

Så enkelt er det å lage en "avansert" knapp 😉

PS: Jeg beklager at koden ikke ligger i "kodebokser". Holder på med en omlegging akkurat nå, så det fungerer ikke i WYSIWYG editoren akkurat nå…

Mvh

Preben

Preben O. Sangvik

OBS: Sjekk ut podcasten "Markedskanalen" på facebook. <<< Preben Sangvik jobber i Responspartner AS og har mye kompetanse på både online markedsføring, webteknisk og design - og god erfaring med å knytte dette sammen til en helhet som fungerer for kundene.

HTML knapp som konverterer best del 2

Relaterte tema

Preben O. Sangvik