HTML CSS Invisible Button

Question

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!

Answer 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.

Answer 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.