vhdz04 vhdz04 - 10 months ago 40
HTML Question

Add an icon image on top of an html input type=button

I need to add an .PNG image on top of my css button, the image will be a hamburger menu icon to show that the button is expandable.

These are my buttons.

these are my buttons

The buttons are created with this HTML:


$serverID = $row1['id'];
$serverName = $row1['servername'];

echo"<input type='button' id='$buttonId' class='btn' name='show' value='".$serverName."' onclick='javascript:showServer(".$buttonId.");'
style='width: 90%; margin: 1%; text-align:left;'>";

echo"<div id='$serverName' style='margin: 3%; display:none;'>";

echo"<table style='border-bottom: 1px solid black;' cellspacing='10px'>

<th>Date Completed</th>

I have tried putting both the image tag and the input type inside a div element and tired to position the image over the button with no success, is there a better way to do this? or can any one suggest an alternative element that will allow me to do this more easily than the button element? thank you in advance.

Answer Source

The easy way is to use an actual button element.

<button type="button"
        id="<?php echo htmlspecialchars($buttonId); ?>"
    <img src="hambuger.png" alt="">
    <?php echo htmlspecialchars($serverName); ?>