0

我想知道如何拥有一个具有某些功能的按钮（单击它只是链接到另一个页面）。

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

2）当用户将鼠标悬停在按钮上时，我希望它向上平滑地动画，所以它在它以前的位置上方浮动一点（可能是 20 像素？）

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

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

提前致谢！

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

4

1 回答 1

0

这是使用 css 的过渡和盒子悲伤的基本示例。您可以使用边距和过渡为按钮向上设置动画。

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/

于 2013-03-19T07:46:30.800 回答