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!

you could use an image map and javascript event handlers, but I have to question why you don't want to do this using a more semantic markup — TommyBs, Dec 21 '12 at 12:57
You want to just use the background to style your buttons? Really? — Tom Walters, Dec 21 '12 at 13:02
i know its not the best of plans, im just fooling around with all kinds of settings. learning in an odd way — user1880779, Dec 21 '12 at 13:09

score 40 · Accepted Answer · edited Jun 20 '20 at 09:12

40

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 21 '12 at 13:14

Amyth

32,527
26
93
135

thanks, is there anyway to hide everything (while its clickable) but still display the button text only? – user1880779 Dec 21 '12 at 13:49
if you want to see the button text, just remove the `font-size:0;` from the above code. see updated answer. – Amyth Dec 21 '12 at 13:51

score 12 · Answer 2 · answered Dec 21 '12 at 13:05

12

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.

answered Dec 21 '12 at 13:05

xiaoyi

6,641
1
34
51

Mevin Babu · Answer 3 · 2012-12-21T13:30:10.140

8

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

edited Dec 21 '12 at 13:30

answered Dec 21 '12 at 13:10

Mevin Babu

2,405
21
34

thanks, is there anyway to hide everything (while its clickable) but still display the button text only? – user1880779 Dec 21 '12 at 13:44
To make the button completely invisible, I set "cursor" to be default, so even when hovering over the button's location, the cursor will never change to a hand. This was exactly the direction I needed - thanks! – Isxek Nov 15 '13 at 00:31

score 3 · Answer 4 · answered Dec 21 '12 at 13:12

3

HTML

<input type="button">

CSS

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

answered Dec 21 '12 at 13:12

Muhammad Usman

10,426
22
72
107

thanks, is there anyway to hide everything (while its clickable) but still display the button text only? – user1880779 Dec 21 '12 at 13:48

score 1 · Answer 5 · answered Dec 21 '12 at 13:09

1

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

JSFiddle

answered Dec 21 '12 at 13:09

Vucko

20,555
10
56
107

HTML CSS Invisible Button

5 Answers5

Transparent Button With No Text

Transparent Button With Visible Text

For Example

Linked

Related