Плавная анимация для кнопки из CSS меню

[Samuel]

Привет всем!

Подскажите, пожалуйста, какой код где прописать, чтобы была плавная анимация смены цвета под курсором для кнопки сделанной из CSS меню?

[igorweb]

Между тегами HEAD:

Код: Выделить всё

<style>
#wb_CssMenu1 li:hover, #wb_CssMenu1 li a:hover, #wb_CssMenu1 .active {
transition:all 0.8s ease;
-moz-transition:all 0.8s ease;
-webkit-transition:all 0.8s ease;
background-color: #A90832;}</style>


Где:
wb_CssMenu1 - цифра "1" - это ваше меню по порядку, т.е. если будет 2-я кнопка, то, соответственно, будет другой порядковый номер (смотрите id объекта в общем)
0,8s - скорость анимации в миллисекундах
#A90832 - цвет в 6-значной системе, ставите свой.

[Samuel]

Да, спасибо цвет меняется плавно, но вот только если изначально форма css меню была скруглена - то при наведении курсора - при изменении текста подсвечивается кнопка как прямоугольная, т.е. видимо без учета изначального скругления..

[Gudwinn]

Впишите в код который Игорь предоставил радиус закругления, с таким же значением, как и в билдере для дефолтной кнопки

[Samuel]

Получился код

<style>
#wb_CssMenu1 li:hover, #wb_CssMenu1 li a:hover, #wb_CssMenu1 .active {
transition:all 0.8s ease;
border-radius: 55px;
-moz-transition:all 0.8s ease;
-webkit-transition:all 0.8s ease;
background-color: #94ffd6;}
</style>

и все заработало! Спасибо.

Вот, только, как допилить код, чтобы плавность смены цвета под курсором была не только когда наводишь курсор, но и когда убираешь его?

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

[Gudwinn]

Дополните этот код такой записью:

-webkit-transition: all .8s linear;
-o-transition: all .8s linear;
transition: all .8s linear;

[MasterOfPuppets]

Кирилл, подскажи, пожалуйста, этот код для плавной обратки нужно добавить внутри фигурных скобок? Или просто следом. У меня в ССS меню три элемента подменю. Но плавный эффект распространяется только на вторые два подменю. Код следующий:

<style>
#wb_CssMenu1 li:hover, #wb_CssMenu1 li a:hover, #wb_CssMenu1 .active {
transition:all 0.8s ease;
border-radius: 0px;
-moz-transition:all 0.8s ease;
-webkit-transition:all 0.8s ease;
-webkit-transition: all .8s linear;
-o-transition: all .8s linear;
transition: all .8s linear;}
</style>

[Gudwinn]

Источник цитаты этот код для плавной обратки нужно добавить внутри фигурных скобок?

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

[Samuel]

Я так понимаю, что, надо просто ease на linear везде заменить

[MasterOfPuppets]

Источник цитаты так понимаю, что, надо просто ease на linear везде заменить

не помогло, к сожалению..

Кирилл, моим пожеланием к расширению СSS-меню будут эффекты отображения. Например как здесь http://lawyer.secretlab.pw/family-lawyer-services/