User Tools

Site Tools


notes:css:hyperlink_button

Hyperlink using CSS

Example: The following CSS makes a hyperlink look like a button. This is how the normal and the hover states look like:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .HyperlinkButton {
            width: 160px;
 
            font-family: Tahoma;
            font-size: 11pt;
            line-height: 17pt;
            text-align:center;
 
            color: #000000; 
            background-color: #E0ECFA; 
 
            padding-left: 12px;
            padding-right: 12px; 
            padding-bottom: 3px;
            padding-top: 2px;
 
            border-style: solid;
            border-width: 1px;
            border-color: Gray;
            text-decoration: none;
        }
 
        A.HyperlinkButton:hover {
            color: #FFFFFF; 
            background-color: Gray; 
        }        
    </style>
 
</head>
    <body id="WbsBody">
        <a href="CssSamples.htm" class="HyperlinkButton">Hyperlink Button</a>
    </body>
</html>

Remarks: line-height is important to render border-top correctly. Its value depends on padding-top.

Example: Two examples of styling an anchor:

<html>
    <head>
        <style type="text/css">
            * { font-family: Verdana; }
 
            /* a visited hyperlink looks the same as not visited and the active one */
            a:link    {color: blue; text-decoration: none;}
            a:visited {color: blue; text-decoration: none;}
            a:hover   {color: crimson; text-decoration: none;}
            a:active  {color: blue; text-decoration: none;}
 
            a.Button:link    {color: green; border: solid 1px transparent}
            a.Button:visited {color: green; border: solid 1px transparent;}
            a.Button:hover   {background-color: silver; border: solid 1px black;}
            a.Button:active  {color: green; border: solid 1px transparent}
        </style>
    </head>
 
    <body>
        <a href="http://www.wbswiki.com">Link1</a><br /><br />
        <a class="Button" href="http://www.wbswiki.com">Link2</a>
    </body>
</html>

More info: Styling Links at w3schools.com

notes/css/hyperlink_button.txt · Last modified: 2016/10/27 by admin