User Tools

Site Tools


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>
    <style type="text/css">
        .HyperlinkButton {
            width: 160px;
            font-family: Tahoma;
            font-size: 11pt;
            line-height: 17pt;
            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; 
    <body id="WbsBody">
        <a href="CssSamples.htm" class="HyperlinkButton">Hyperlink Button</a>

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

Example: Two examples of styling an anchor:

        <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}
        <a href="">Link1</a><br /><br />
        <a class="Button" href="">Link2</a>

More info: Styling Links at

notes/css/hyperlink_button.txt · Last modified: 2020/08/26 (external edit)