# How to Add an Image to a Button Based on a Condition

**URL:** <https://www.phphelp.com/t/how-to-add-an-image-to-a-button-based-on-a-condition/32824>\
**Category:** HTML & CSS\
**Created:** [November 19, 2020, 7:43pm UTC](https://www.phphelp.com/t/how-to-add-an-image-to-a-button-based-on-a-condition/32824 "2020-11-19T19:43:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bozo](https://www.phphelp.com/letter_avatar_proxy/v4/letter/b/8797f3/32.png) [@Bozo](https://www.phphelp.com/u/Bozo)\
**Post date:** [November 19, 2020, 7:43pm UTC](https://www.phphelp.com/t/how-to-add-an-image-to-a-button-based-on-a-condition/32824/1 "2020-11-19T19:43:40Z")

</div>

Hi,

I have a PHP web page that displays buttons that show the status of My homemade automation system. The majority of it is working, but I cannot figure out how to place an image on a button if a device is offline. I do have an array that tells me when it is offline, but I can’t seen to get the css and html to work correctly.

Below is the css I am using for the button with an image:

```auto
echo ' .button {';
echo ' border: none;';
echo ' color: white;';
echo ' padding: 20px;';
echo ' text-align: center;';
echo ' text-decoration: none;';
echo ' display: inline-block;';
echo ' font-size: 16px;';
echo ' margin: 4px 2px;';
echo ' cursor: pointer;';
echo '}';

echo ' .img_button {';
echo ' background-image: "transparent-red-no-circle-th.png"';
echo ' border: none;';
echo ' color: white;';
echo ' padding: 20px;';
echo ' text-align: center;';
echo ' text-decoration: none;';
echo ' display: inline-block;';
echo ' font-size: 16px;';
echo ' margin: 4px 2px;';
echo ' cursor: pointer;';
echo '}';
```

Following is the code for what type of button I want to create:

```auto
for ( $x = 0; $x < count($uName); $x++ ) {
      if ( $uName[$x][2] == 2 ) {
         echo '.img_button'.$x.' {border-radius: 50%;}';
      } else {
         echo '.button'.$x.' {border-radius: 50%;}';
      }
   }
```

My HTML for button with image looks like:

```auto
echo '<button class="img_button img_button'.$x.'" onclick="changeText(this.id)" value="Off" id="img_button'.$x.'"></button>';
```

Currently my web page shows, the white button is the image one:

 ![Capture](https://www.phphelp.com/uploads/default/original/2X/1/140625d95d000566ce9389f5e26a2ee2e74b0c93.jpeg)

Any help would be greatly appreciated

---

<div class="post-metadata">

**Author:** ![Strider64](https://www.phphelp.com/user_avatar/www.phphelp.com/strider64/32/3161_2.png) [@Strider64](https://www.phphelp.com/u/Strider64)\
**Post date:** [November 19, 2020, 11:11pm UTC](https://www.phphelp.com/t/how-to-add-an-image-to-a-button-based-on-a-condition/32824/2 "2020-11-19T23:11:56Z")

</div>

why are you doing that? Just use CSS and simply add or remove a CSS class with javascript or php (or both)?

---

<div class="post-metadata">

**Author:** ![Bozo](https://www.phphelp.com/letter_avatar_proxy/v4/letter/b/8797f3/32.png) [@Bozo](https://www.phphelp.com/u/Bozo)\
**Post date:** [November 20, 2020, 12:30am UTC](https://www.phphelp.com/t/how-to-add-an-image-to-a-button-based-on-a-condition/32824/3 "2020-11-20T00:30:50Z")

</div>

Thank you very much for your reply. I guess the short answer to your question is, I don’t know how. I have not used CSS or JS in the past and am just trying to learn a little on how to use both of them. If you could head me in the right direction I would really appreciate it.