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

User · Accepted Answer

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.

User · Answer

You can use CSS to hide the button   button     visibility  hidden      If your  lt button gt  is just a clickable area on the image  why bother make it a button  You can use  lt map gt  element instead

User · Answer

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

User · Answer

HTML   lt input type  button  gt    CSS  input type button    background transparent   border 0

User · Answer

Use CSS background transparent  to your button div   JSFiddle

[html] HTML CSS Invisible Button

Transparent Button With No Text

Transparent Button With Visible Text

For Example

Examples related to html

Examples related to css

Examples related to button

Examples related to invisible