Javascript 鼠标悬停并在鼠标上方显示阴影的Web按钮

我想知道如何有一个按钮（点击它只是链接到另一个页面）与一些功能

1） 该按钮是一个没有文本的图像按钮

2） 当用户将鼠标移到按钮上时，我希望它能够平滑地向上移动，这样它就可以在原来的位置上稍微浮动一点（也许是20px？）

3） 当按钮悬停时，它应该在其基线上投射一个小阴影。我的意思是一个阴影，而不是一个阴影的边界-一个阴影，好像正午的太阳在上面，并在地面上投射一个向下的椭圆状阴影

本质上，我希望有一个按钮与一个非常美观的感觉。javascript或jquery解决方案将是完美的

提前谢谢

---

（我应该提到的是，我已经在谷歌上搜索了很多，但是描述按钮功能的最好术语是“悬停”，我得到了所有与鼠标相关的结果——“悬停”实现，而不是实际可见的按钮“悬停”）

这里是使用css的过渡和方框显示的基本示例。可以使用边距和过渡向上设置按钮的动画

html

拨弄

对于js，可以使用jquery animate设置按钮的动画

css

js

---

fiddle

这是一个很好的答案，几乎正是我想要的。我可能不太清楚这个阴影——我在寻找一个像椭圆一样的小阴影“在地面上”，好像正午的太阳在悬浮的盒子上方，在它下面投射一个阴影；与您创建的边界阴影不同。如果你能帮我，我就给你支票！您只需要改进这个源代码，不要等待绝对答案。很公平！谢谢你的帮助：）

<button></button>

button {
    display: block;
    margin-top: 20px;
    height: 40px;
    width: 60px;
    color black;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    transition: all 200ms linear;
    border: none;
    background-image: url('your image');
}
button:hover {
    margin-top: 0px;
    -moz-box-shadow: 0px 0px 4px 1px grey;
    -webkit-box-shadow: 0px 0px 4px 1px grey;
    box-shadow: 0px 0px 4px 1px  grey;
}

button.hover {
    -moz-box-shadow: 0px 0px 4px 1px grey;
    -webkit-box-shadow: 0px 0px 4px 1px grey;
    box-shadow: 0px 0px 4px 1px  grey;
}

$('button').on('mouseover', function(){
    $(this).animate({'margin-top':0}, 200);
    $(this).addClass('hover');
});
$('button').on('mouseout', function(){
    $(this).animate({'margin-top':20}, 200);
    $(this).removeClass('hover');
});