Question

以下是我开始使用的按钮的链接：http://imgur.com/DrpgE

我试图让按钮在被点击时被物理按下，这意味着删除原始按钮图像，并将其替换为没有投影的按钮图像。为了让它看起来正确，我需要向下和向右移动新的无阴影按钮，使其与原始按钮的阴影位置对齐。因为阴影是透明的，所以我不能隐藏下面的无阴影按钮。

我已经看过按钮更改的教程，但他们似乎都使用隐藏技术。

有什么想法吗？

Answer 1

如果我理解你的问题，这曾经是我的一个大问题。

首先让我说我认为你需要失去实际“移动”按钮的想法。我想说创造幻觉的最好方法是简单地制作两张不同的照片（大小相同），一张按下按钮。

您唯一需要的是决定要显示哪张照片的方法。如果你想制作悬停按钮，我发现了一种使用CSS制作这些按钮的非常简单的方法。您可以将按钮设为＆lt; a＆gt;并给它一个类（例如“mybutton”）。在你的CSS中，你将没有一个，而是两个代码块：

a.mybutton {
background: transparent url(/*image A url here*/) no-repeat left;
}

a.mybutton:hover, a.mybutton:active {
background: transparent url(/*image B url here*/) no-repeat right;
}

这样，当您将鼠标悬停在链接上时，最后一个块将生效，取消第一个块，图像（我作为背景）将从A更改为B.

同样重要的是给按钮width和height，否则你将看不到它（！）。您只需要在顶部块中执行此操作。

另外，您可能会注意到，如果您是第一次将鼠标悬停在它上面，则必须加载图像B，使其闪烁。现在有很多脏的JavaScripts可以解决这个问题，但我解决这个问题的方法是将图像A和B合并到同一个文件中，使背景从左到右（或从上到下，最适合你）当盘旋时这会给你类似的东西：

a.mybutton {
background: transparent url(/*image url here*/) no-repeat left;
}

a.mybutton:hover, a.mybutton:active {
background: transparent url(/*image url here*/) no-repeat right;
}

现在我不知道你想要什么时候进行推动效果，但即使你想要制作比悬停按钮更复杂的东西，我也会说使用CSS改变按钮的背景图像会顺便说一句。

您可能希望在w3schools.com阅读此页面。

我使用上述按钮技术的网站是didyoueverfeel.com。

想要在略有不同的位置使用不同尺寸的按钮替换按钮

1 个答案: