Hyperlink als button met CSS

27-01-2010

Een hyperlink ( a href ) met alleen CSS weergeven als button HTML element? Dat kan! Op deze pagina een voorbeeld. Het gedrag zal niet exact gelijk zijn als een echte browser button, maar de gebruiker zal het nut van de knop helemaal begrijpen.

Hyperlinks kunnen ook als visueel meer geavanceerde knoppen weergegeven worden. De oplossing "Pure CSS Buttons" is een mooie uitwerking daarvan: http://halmatferello.com/lab/pure-css-buttons/ . Deze methode maakt van meerdere HTML elementen gebruik voor de presentatie van de knop. Daardoor is dit niet geschikt voor de integratie in bestaande webapplicaties of frameworks (en dus .NET ).

De oplossing van Dynamic drive, de site die gekoppeld is aan deze tip, is wel geschikt voor integratie met bestaande backoffice systemen. In .NET wordt de CSS toegevoegd en de naam van de button class (uit de CSS) dient toegevoegd te worden aan het CssClass attribuut van het element ASP:HyperLink .

De volgende CSS en HTML code biedt de ontwikkelaar de mogelijkheid om een standaard hyperlink als ouderwetse form button weer te geven:
<style type="text/css">
.buttonlink{
margin:0px;
line-height:25px;
border-right: 2px outset ButtonShadow;
border-bottom: 2px outset ButtonShadow;
border-left: 1px outset #ffffff;
border-top: 1px outset #ffffff;
cursor:default;
display:inline;
text-align:center;
padding:3px 15px 3px 15px;
text-decoration:none;
background-color:ButtonFace;
color:ButtonText;
font-family:arial;
font-size:10pt;
}

.buttonlink:active,.buttonlink:focus{
border-left:2px inset #666666;
border-top:2px inset #666666;
border-right:1px outset #ffffff;
border-bottom:1px outset #ffffff;

}
</style>

<a href="?pagina=1" class="buttonlink">Een A href als button</a>

http://www.dynamicdrive.com/style/csslibrary/item/3d-css-buttons/

Youtube en Flash video online naar Windows, Mac of iPod formaat omzetten

Vergelijk Microsoft SQL Server databases met elkaar

Hyperlink als button met CSS

Zie ook:

twitter

dagtip

twing!

zoeken

dagtip

populair

blog

links