Transparent Image Button

Question

I made a button that opens to make sort of like a drop-down page. I also made a button to retract the page and put an image in it, but I want to make the button not show up, only the image. Can anyone help?

HTML:

<button onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>

https://codepen.io/Maniraj_Murugan/pen/poJPjpr – Maniraj Murugan Feb 27 '20 at 13:52 — Maniraj Murugan, Feb 27 '20 at 13:52
Does this answer your question? [Embed image in a – Awais Feb 27 '20 at 13:53 — Awais, Feb 27 '20 at 13:53

score 1 · Answer 1 · answered Feb 27 '20 at 13:48

Here's the solution:

.transparent_button {
     background-color: transparent;
        border: 0px;
    }

  <button class="transparent_button" onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>

But for a better-written solution, you can try this (this won't force CSS uslessly):

<img onclick="close1()"src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30">

score 0 · Answer 2 · answered Feb 27 '20 at 13:52

If you don't need the button, but just the image to be clicked on you can leave the button out and use the following code:

<img onclick="close1() src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30" />

Maybe, if you want a border you can box it and style that:

HTML:

<div class="imageBox">
<img onclick="close1() src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30" />
</div>

CSS:

.imageBox{
    border:1px solid #c1c1c1;
    /* Other additional styles */
}

score 0 · Accepted Answer · answered Feb 27 '20 at 13:55

The solution: only set transparent border and background for it.

button {
  background: transparent;
  border: none;
}

<button class="transparent_button" onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>

Transparent Image Button

3 Answers3