HTML CSS隐形按钮(HTML CSS Invisible Button)

2019-07-17 11:41发布

您好,我试图让一个不可见的按钮(仍然功能齐全,可点击),因为我的按钮样式被嵌入在后台,我不想切片他们,做这一切的开始。

所以,我只想做一个按钮,把它的背景,其中按钮应,并使其不可见这样的背景按钮图像可以看到和点击的部分。

有什么建议? 非常感谢你!

Answer 1:

您必须使用下列属性的button元素,使之透明。

透明键,无文本

button {

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

透明按钮使用可见文本

button {

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

并使用绝对position的元素位置。

例如

你有一个div下按钮元素。 使用position :在相对股利和position :绝对上的按钮的div中定位。

这里是一个工作的jsfiddle

这里是一个更新的jsfiddle显示从按钮只有文字。



Answer 2:

您可以使用CSS来隐藏按钮。

button {
  visibility: hidden;
}

如果你的<button>只是一个可点击区域的图像,何苦让一个按钮? 您可以使用<map>元素来代替。



Answer 3:

button {
    background:transparent;
    border:none;
    outline:none;
    display:block;
    height:200px;
    width:200px;
    cursor:pointer;
}

给予高度和宽度相对于在background.This图像去除边框和button.You的颜色可能还需要将它定位绝对让您可以正确地将其放置在你,你还need.I不能帮助而不发布你码

为了使之真正隐形,你必须设置概述:无; 否则就不会有在一些浏览器中一个蓝色的轮廓,你必须设置显示:块 ,如果你需要点击它并设置尺寸它



Answer 4:

HTML

<input type="button">

CSS

input[type=button]{
 background:transparent;
 border:0;
}


Answer 5:

使用CSS background:transparent; 你的按钮/ DIV。

的jsfiddle



文章来源: HTML CSS Invisible Button