плавное появление добавите сами, и не забывайте скрыть блок в стилях к примеру через display:none;

спасибо

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

[JS]
function animate(opts){
var start = new Date();

var timer = setInterval(function (){

var progress = (new Date - start)/opts.duration;
if(progress > 1)progress = 1;

opts.step(opts.delta(progress));

if(progress == 1){
clearInterval(timer);
opts.compleat && opts.compleat(opts.elem);
};

},opts.delay || 60);

return timer;
}


function Prop(opts){

opts.step = function (prog){
var value;

for(var i = opts.prop.length;i--;){

value = opts.start[i] + ((opts.value[i] - opts.start[i] )*prog);
opts.elem.style[opts.prop[i]] = value+ opts.units;

};

}

opts.delta = opts.delta || function (progress){

return progress;

}
return animate(opts);
}
/*Пример вызова*/
//Prop({
//elem:document.getElementById('testBlock'),//элемент на котором происходит анимация
//start:[0],// начальное значение
//value:[1],// конечное значение
//prop:['opacity'],/* свойство анимации, можно анимировать несколько свойств ['opacity','width']
//тогда start передается так [0,100](100 - начальное значение ширины) , а value так [1,500](500 - конечное значение ширины)
//*/duration:2000,// время анимации
//delta: bounce,
//units:''//единицы измерение px || % || ''-без единици измерения

// });

/*Пример анимации мяча*/
function bounce(progress) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2)
}
}
}
[/JS]

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.