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; }
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
Code Odyssey » Jakten på de perfekta knapparna Wrote:
11:e Juni 2007
Tags