I am trying to use the CSS3 ease-in-out effect when mouseover the tabs, here

Question

0

Asked: May 28, 20262026-05-28T01:59:18+00:00 2026-05-28T01:59:18+00:00

I am trying to use the CSS3 ease-in-out effect when mouseover the tabs, here

0

I am trying to use the CSS3 ease-in-out effect when mouseover the tabs, here the background color is changing, but the text color is not changing.

My HTML code is:

<html>
    <body>
        <div id="tab" class="links">
            <a href="#">Rang De</a>
        </div>
        <div id="tab" class="links">
            <a href="#">Robin Sharma</a>
        </div>
        <div id="tab" class="links">
            <a href="#">Programme</a>
        </div>
        <div id="tab" class="links">
            <a href="#">Book now</a>
        </div>
        <div id="tab" class="links">
            <a href="#">Contact</a>
        </div>
    </body>
</html>

My CSS is:

#tab
{
    float: left;
    padding: 15px 10px 10px 10px;
    background: url(images/menutop.gif) repeat-x 0px 0px #EDEDED;
    height: 25px;
    width: 176px;
    font-size: 16px;
    text-align: center;
    border: 1px solid #FAFAFA;
    box-shadow: 0px 4px 4px #d5d5d5;
    -moz-box-shadow: 0px 4px 4px #d5d5d5;
    -webkit-box-shadow: 0px 4px 4px #d5d5d5;
}
.links:hover
{
    background: #00a9dd !important;
    color: #fff;
    text-shadow: 0.1em 0.1em 0.05em #333;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
 }

Here’s a jsFiddle.