Styla om länkar som knappar

Standardknapparna i html kan vara lite tråkiga. Jag finner mig ofta att använda länkar istället eftersom de vanliga <input type="submit" /> och <Button /> elementen. Det har helt enkelt för dåligt CSS-stöd för att kunna designas i någon större utsträckning. Ett alternativ är ju att använda en bild som knapp. Nackdelen är då att man måste skapa en ny bild för varje ny text man vill ha.

Jag bestämde mig istället för att försöka ändra utseendet på länkarna för att de ska likna knappar och här nedan ser du resultatet. Jag använder en tonad bild bakgrund och vänder på denna när man för markören över (hover).

Detta är ett exempel på en knapp

a.button, a.button:link, a.button:active, a.button:visited {

background-image: url('../images/button_back.gif');
padding:0 5px 0 5px;
background-position:50% 50%;
background-repeat:repeat-x;
border: 2px outset #cccccc;
color: #fff;
font-weight:bold;
text-decoration:none;}
a.button:hover
{
color: #fff;
background-image: url('../images/button_back_hoover.gif');
text-decoration:none; }

Comments

[…] På denna bloggen använder vi länkar som knappar eftersom då får man större frihet på utseendet. De är dock inte speciellt fancy. […]