Home/ Questions/Q 6121275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:45:56+00:00

How I can put press effect on anchor tag. This is my css &

  • 0

How I can put press effect on anchor tag.

This is my css & html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <style>    .navigation{
       height:28px;
    line-height:28px;
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;
    float:left;
    padding-top:20px;
    }
    .navigation ul li{
    margin:0px;
    list-style-type:none;
    float:left;
    padding-right:5px;
    }
    .navigation ul li a{
    list-style-type:none;
    display:block;
    float:left;
    text-decoration:none;
    padding-left:12px;
    background:url("../images/nav-bg.png") 0 -56px no-repeat;
    color:#999;
    }
    .navigation ul li a span{
        list-style-type:none;
        display:block;
        float:left;
        text-decoration:none;
        cursor:pointer;
        padding-right:12px;
        background:url("../images/nav-bg.png") right -84px no-repeat;
        }
    .navigation a:hover{
        background:url("../images/nav-bg.png") 0 0  no-repeat;
    }
    .navigation a:hover span{
        background:url("../images/nav-bg.png") right -28px no-repeat;
    }


    .navigation a.activetab{
        background:url("../images/nav-bg.png") left -112px no-repeat !important;
    }
    .navigation a.activetab span{
        background:url("../images/nav-bg.png") right -140px no-repeat !important;
        color:#fff;
    }</style>
    </head>
    <body>
    <div class="navigation">
                    <ul>
                        <li><a href="javascript:void(0):" class="activetab"><span>Dashboard</span></a></li>
                        <li><a href="javascript:void(0):"><span>Courses</span></a></li>
                        <li><a href="javascript:void(0):"><span>Reports</span></a></li>
                        <li><a href="javascript:void(0):"><span>Message Board</span></a></li>
                    </ul>
                </div>
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, don’t use images to get this effect since they add to the page weight, need time to be downloaded and in particular are very inflexible.

    Use CSS3 techniques instead. For example, check the source at http://ubuwaits.github.com/css3-buttons/ or read the tutorial at http://www.uxrevisions.com/freebies/css3-buttons-examples-with-source-code/181/ or any other tutorial on the CSS3 buttons that are available elsewhere

    Then grab CSS3 Pie and make it work in IE6 and up.

    • 0