CSS вопрос стиля, для кнопок

Question

Ive пытались дать стиль кнопку, кода, который я уже использовал это

#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

Как только вы изменить внешний вид кнопки, вы также должны изменить его для pseudoclasses :active и :hover иметь его работу как обычная кнопка.

То есть ваша кнопка на самом деле является кнопкой, но она не знает, как она выглядит при нажатии (:active) или при наведении курсора мыши (:hover).

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

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

Answer 2

Это функция javascript, которую вы вызываете? Если это так, скрипт загрузится на вашу страницу html и попробуйте также с небольшими свойствами CSS только ширину и высоту, посмотрите, как работает погода, или нет.

Answer 3

Под «действовать как кнопка», вы имеете в виду, что он выглядит как интерактивный?

Возможно, возможно, что кнопка не имеет активного (щелкнутого) состояния. Обычно кнопка без стиля будет иметь активное состояние, разработанное браузером, используемым пользователем. Но поскольку вы уже разработали почти все аспекты своей кнопки, браузер не добавит дополнительного стиля.

Чтобы добавить свой собственный активный (щелкнул состояние), используйте:

#srchBtn:active { }

Вы также можете добавить его парения-е изд состояние с этим:

#srchBtn:hover { }

Answer 4

я забрать элемент id и сделать его классом. на случай, если вы решите иметь более одной кнопки на своей странице. то вы можете держать все кнопки на вашем сайте едиными и интуитивно понятными.

.srchBtn{} //also include cursor:pointer 

.srchBtn:hover{}