• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Hover эффект при нажатии на кнопку (Стиль кнопки в css)
Hover эффект при нажатии на кнопку
Funny_007
Сообщений: 50
Репутация: 0

Сообщение # 1 | 18:34:18
Всем доброго времени суток!
У меня на сайте не работает hover эффект при нажатии на кнопку (например у кнопки ответить в блоке опросов). Может косяк в коде? Помогите!


P.S. Как узнать id или class той или иной кнопки на сайте?
Сообщение отредактировал Funny_007 - Четверг, 20 Мар 2014, 18:42:51
0RJ0
Сообщений: 208
Репутация: 68

Сообщение # 2 | 20:36:10
Funny_007, все эффекты работают (обычный вид, при наведении, при нажатии).

id и class можно узнать при помощи просмотра исходного кода страницы (в браузере Opera — Правая кнопка — Исходный код. Далее находите через поиск (доступен при помощи нажатия сочетания клавиш Ctrl+F) нужного элемента страницы.
Прикрепления: 3964558.png (153.3 Kb)
Funny_007
Сообщений: 50
Репутация: 0

Сообщение # 3 | 21:33:58
0RJ0, при нажатии она должна затемняться - посмотрите на этом сайте.
Rostislav
Сообщений: 2396
Репутация: 591

Сообщение # 4 | 21:42:06
Funny_007, кнопка на вашем сайте работает точно так же как и на сайте, который вы привели в пример (thoughtbot)

hover-эффект у вас не затемнения, а осветления

Funny_007
Сообщений: 50
Репутация: 0

Сообщение # 5 | 21:55:24
Rostislav, извиняюсь, может я перепутал active и hover, но суть в том, что на моем сайте при нажатии на кнопку не происходит затемнения...
Т.е. навожу на кнопку - происходит осветление, нажимаю - убирается тень, но кнопка не затемняется.
Фиг его знает, может я придираюсь...
Не ожидал, что мне ответит Админ, спасибо! =)
Сообщение отредактировал Funny_007 - Четверг, 20 Мар 2014, 22:00:02
0RJ0
Сообщений: 208
Репутация: 68

Сообщение # 6 | 22:31:03
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); }
Funny_007
Сообщений: 50
Репутация: 0

Сообщение # 7 | 22:41:05
0RJ0, ух ты ж, помогло, СПАСИБО большое!!! Вроде ничего сам не менял...странные вещи творятся =)
СПАСИБО еще раз, + в репутацию!
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Hover эффект при нажатии на кнопку (Стиль кнопки в css)
  • Страница 1 из 1
  • 1
Поиск: