问题

Hello I am trying to make an invisible button (still functional and clickable), because my buttons styles are embedded in the background and I don't want to slice them, and do it all from beginning.

So I just want to make a button, put it on the part of the background where the button should be and make it invisible so the background button image can be seen and clicked.

Any suggestions? Thank you very much!

回答1:

you must use the following properties for a button element to make it transparent.

Transparent Button With No Text

button {

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

Transparent Button With Visible Text

button {

    background: transparent;
    border: none !important;
}

and use absolute position to position the element.

For Example

you have the button element under a div. Use position : relative on div and position: absolute on the button to position it within the div.

here is a working JSFiddle

here is an updated JSFiddle that displays only text from the button.

回答2:

You can use CSS to hide the button.

button {
  visibility: hidden;
}

If your <button> is just a clickable area on the image, why bother make it a button? You can use <map> element instead.

回答3:

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

Give the height and width with respect to the image in the background.This removes the borders and color of a button.You might also need to position it absolute so you can correctly place it where you need.I cant help you further without posting you code

To make it truly invisible you have to set outline:none; otherwise there would be a blue outline in some browsers and you have to set display:block if you need to click it and set dimensions to it

回答4:

HTML

<input type="button">

CSS

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

回答5:

Use CSS background:transparent; to your button/div.

JSFiddle

来源：https://stackoverflow.com/questions/13990629/html-css-invisible-button

标签

html

css

button

invisible

HTML CSS Invisible Button

问题