postenehandelsguiden DEMO

Logga in
Select language
Start Hjälp

Utforma länkar som knappar


Exempellänk

Kopplingar från er egna webbplats till postenehandelsguiden görs ibland genom en enkel länk som skickar besökaren vidare till oss. Då vill man vanligtvis framhäva länken vilket är enkelt att göra med hjälp av CSS.

Exemplet är mestadels hämtat från Porscheklubben som använder MinaAktiviteter för hantering av medlemsregister och klubbaktiviteter.

https://www.porsche.nu/user/register


Med fristående CSS-kod (rekommenderas om möjligt)

Det bästa och enklaste är att använda en HTML-klass för att koppla fristående CSS-kod till en länk. CSS-koden kan placeras i en separat CSS-fil eller infogas direkt i HTML-headern.

CSS-kod till HTML-headern

<style type="text/css">
	A.cwAction,
	A.cwAction:hover,
	A.cwAction:active {
		display: inline-block;
		font-family: helvetica, arial, sans-serif;
		background-color: #2a4b6d;
		color : #FFF;
		border: 0;
		border-radius: 4px;
		padding: 10px 15px;
		text-align: center;
		font-size: 18px;
		text-decoration: none;
		white-space: nowrap;
	}
	A.cwAction:hover,
	A.cwAction:active {
		background-color: #B30000;
	}
</style>

Länk som placeras på sidan

<a class="cwAction" href=".">Exempellänk</a>

Utformning med inline-style

Att skriva CSS-instruktioner direkt i länken (A-taggen) bör normalt undvikas eftersom det dels gör det betydligt mer arbetsamt att underhålla en webbplats, dels gör allt väldigt grötigt och svåröverskådligt. Ibland går det dock inte att undvika, exempelvis då man arbetar med HTML-kod för e-postutskick. Bland annat gmail accepterar endast inline-style.

<a class="cwAction" style="display: inline-block; font-family: helvetica, arial, sans-serif; background-color: #2a4b6d; color: #fff; border: 0; border-radius: 4px; padding: 10px 15px; text-align: center; font-size: 18px; text-decoration: none; white-space: nowrap;" href="." onmouseover="this.style.backgroundColor='#B30000';" onmouseout="this.style.backgroundColor='#2a4b6d';">Bli medlem</a>
© postenehandelsguiden 2018-10-16 E-post info@minaaktiviteter.se