Javascript 按百分比调整大小的图像按钮

我试图在网页中实现类似门铃的东西。我有一个div里面的门的背景图像，我想添加一个可以点击的门铃图像。我还想更改当前单击按钮时按钮中的图像

我试着使用我在网上发现的图像按钮技术，它使用了如下内容：

<a id="bell" class="button" href="#"><span></span></a>  

---

锚定标记在CSS中有一个背景属性，即按钮图像。但我不能用百分比调整它的大小。我希望门和门铃根据页面百分比调整大小。最好的方法是什么？

如果在锚元素上设置css以显示：block；你可以用%来表示它的大小。也就是说，如果看不到您想要实现的目标，就很难给出最佳的指导-记住要确保您的标记在语义上是正确的，因为“按钮”元素可能比锚元素更合适。

但是我无法更改设置为锚元素的背景url的大小。这就是我需要调整的地方。我使用了背景大小，但在FireFox中不起作用。我只想有一个图像按钮，是根据百分比调整大小。我可以在按钮当前按下和释放时更改按钮上的图像。