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

Question

我想知道如何使用某些功能获得一个按钮（单击该按钮以简单链接到另一个页面）。

1）按钮是图像按钮没有文本

2）当在该按钮在用户将鼠标悬停，我想它顺利动画向上，所以它漂浮只是一个小（也许20像素？）以上它曾经是

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

基本上，我期待有一个非常美观的按钮。一个JavaScript或jQuery解决方案将是完美的。

在此先感谢！ （我应该提到我已经为此使用了Google，但是描述按钮功能的最佳术语是“悬停”，并且我获得了与鼠标“悬停”实现相关的所有结果，而不是实际的可见按钮“悬停“）

Answer 1

这里是使用css过渡和盒子sadhow的基本示例。您可以使用边距和转场向上对按钮进行动画处理。

HTML

<button></button> 

CSS

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; 
} 

小提琴http://jsfiddle.net/caknopal/mmr4F/

为JS，你可以使用jQuery动画以动画按钮。

CSS

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; 
} 

JS

$('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'); 
}); 

小提琴http://jsfiddle.net/caknopal/mmr4F/3/