|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Hover эффект при нажатии на кнопку (Стиль кнопки в css) |
Hover эффект при нажатии на кнопку |
Всем доброго времени суток!
У меня на сайте не работает hover эффект при нажатии на кнопку (например у кнопки ответить в блоке опросов). Может косяк в коде? Помогите! P.S. Как узнать id или class той или иной кнопки на сайте? Сообщение отредактировал Funny_007 - Четверг, 20 Мар 2014, 18:42:51
|
Funny_007, все эффекты работают (обычный вид, при наведении, при нажатии).
id и class можно узнать при помощи просмотра исходного кода страницы (в браузере Opera — Правая кнопка — Исходный код. Далее находите через поиск (доступен при помощи нажатия сочетания клавиш Ctrl+F) нужного элемента страницы. Прикрепления:
3964558.png
(153.3 Kb)
|
0RJ0, при нажатии она должна затемняться - посмотрите на этом сайте.
|
Funny_007, кнопка на вашем сайте работает точно так же как и на сайте, который вы привели в пример (thoughtbot)
hover-эффект у вас не затемнения, а осветления |
Rostislav, извиняюсь, может я перепутал active и hover, но суть в том, что на моем сайте при нажатии на кнопку не происходит затемнения...
Т.е. навожу на кнопку - происходит осветление, нажимаю - убирается тень, но кнопка не затемняется. Фиг его знает, может я придираюсь... Не ожидал, что мне ответит Админ, спасибо! =) Сообщение отредактировал Funny_007 - Четверг, 20 Мар 2014, 22:00:02
|
Funny_007, хм. Если вы что-то меняли в этом коде, то попробуйте поставить это вместо вашего кода:
Код .pollBut, .button_red { background-color: #ee432e; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100)); background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); border: 1px solid #951100; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; -ms-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; -o-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; color: #fff; font: bold 20px "helvetica neue", helvetica, arial, sans-serif; line-height: 1; padding: 12px 0 14px 0; text-align: center; text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8); width: 150px; } .pollBut:hover, .button_red:hover { background-color: #f37873; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601)); background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); cursor: pointer; } .pollBut:active, .button_red:active { background-color: #d43c28; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d43c28), color-stop(50%, #ad3224), color-stop(50%, #9c1500), color-stop(100%, #700d00)); background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); -ms-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); -o-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); } |
| |||
| |||