Question

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

1）按钮是没有文字的图像按钮

2）当用户将鼠标悬停在按钮上时，我希望它能够平滑地向上动画，因此它会漂浮在原来的位置（或者大约20px？）

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

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

提前致谢！

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

Answer 1

这里是使用css的转换和box 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 animate来设置按钮的动画。

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/

悬停的Web按钮，在鼠标悬停时显示阴影

1 个答案: