CSS-exempel

Utforma länkar som knappar

Exempellänk

Kopplingar från er egna webbplats till Mina Aktiviteter 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 Mina Aktiviteter 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>