Question

Ive been trying to give style to button, The code that I ve used is

#srchBtn
{
    width:120px;
    height:25px;
    vertical-align:middle;
    margin-top:10px;
    font-family:Tahoma;
    font-size:15px;
    border: 1px solid orange;
    background-color: red;
    color: white;
    text-shadow: 0 1px 1px black;
    padding: 5px 30px;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px orange, 0 2px 1px black;
   -o-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px orange, 0 2px 1px black;
   -webkit-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px orange, 0 2px 1px black;
   -moz-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px orange, 0 2px 1px black;
}

but it takes away the clickable property of button, it acts like an image. when we try clicking on it, it doesnt act like a button.. what could be wrong??

Answer 1

As soon as you change the appearance of a button, you will also need to change it for the pseudoclasses :active and :hover to have it work as a normal button.

That is to say, your button in fact is a button but it doesn’t know what it looks like while clicked (:active) or on mouseover (:hover).

#srchBtn:hover {
    /* your code here */
}

#srchBtn:active {
    /* your code here */
}