html - css 样式问题，对于按钮

Question

我一直在尝试为按钮赋予样式，我使用的代码是

#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;
}

但是它带走了按钮的可点击属性，它就像一个图像。当我们尝试点击它时，它不像一个按钮。可能是哪里出了问题？？

Answer 1

一旦你改变了按钮的外观，你也需要为 :active 和 :hover 伪类改变它以让它工作 作为普通按钮。

也就是说，您的按钮实际上是一个按钮，但它不知道单击时(:active)或鼠标悬停时(:hover)时的样子>).

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

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