HTML CSS 隐形按钮

Question

你好，我正在尝试制作一个不可见的按钮(仍然可以使用并且可以点击)，因为我的按钮样式嵌入在背景中，我不想将它们分割开来，而是从头开始。

所以我只想做一个按钮，把它放在按钮应该在的背景部分，让它不可见，这样背景按钮图像就可以被看到和点击。

有什么建议吗？非常感谢!

Answer 1

您必须为 button 元素使用以下属性以使其透明。

无文字透明按钮

button {

    background: transparent;
    border: none !important;
    font-size:0;
}

带有可见文本的透明按钮

button {

    background: transparent;
    border: none !important;
}​

并使用绝对position来定位元素。

例如

您在 div 下有按钮元素。在 div 上使用 position : relative 和在按钮上使用 position: absolute 将其定位在 div 中。

这是一个有效的 JSFiddle

这是更新的 JSFiddle仅显示按钮中的文本。