html - 希望用位置稍有不同的不同大小的按钮替换按钮 onclick

Question

这是我开始使用的几个按钮的链接:

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

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

有什么想法吗？

Answer 1

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

首先让我说我认为您需要放弃实际“移动”按钮的想法。我想说，创造这种幻觉的最好方法就是简单地制作两张不同的图片(大小相同)，其中一张按下按钮。

您唯一需要的就是决定要显示哪张图片的方法。如果你想制作悬停按钮，我发现了一种使用 CSS 制作的非常漂亮和简单的方法。你可以让你的按钮成为 并给它一个类(例如“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;
}

这样，当您将鼠标悬停在链接上时，最后一个 block 将生效，否决第一个 block ，并且图像(我制作的背景)将从 A 变为 B。

同时为按钮指定 width 和 height 也很重要，否则您将看不到它(!)。您只需在顶部 block 中执行此操作。

您可能还会注意到，如果您第一次将鼠标悬停在它上面，则必须加载图像 B，使其闪烁。现在有很多肮脏的 JavaScript 可以解决这个问题，但我解决这个问题的方法是将图像 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 .