Inserting an image (with a link) into a button

Recently, I was editing some ETA files for a videomaking program I am creating, and I need some help for one issue I ran into; inserting an image (from a directory in a folder) into a button. Here is some code that was used to insert the image:

<div class="theme" data-has-cc>
  <div class="theme-cell">
    <div class="theme-cover launch">
      <img src="/webpageassets/img/themes/business.jpg" alt="Business Friendly">
    </div>
    <div class="theme-meat">
      <a class="none">Business Friendly</a>
      <div class="apps">
        <a href="http://localhost:4343/go_full?tray=business" class="button_big">Make a Video</a>
        <a href="http://localhost:4343/cc_browser?themeId=business" class="button_small" image_src="/pages/img/videomaker/cc_icon.png"></a>

I was expecting the button to look something like this. However, this is the result. Just for the context of what I am explaining, that little black button is the button which supposedly should have the image. Am I doing something wrong here? Let me know if I did something wrong and you have a fix for this. Also, I need the code to be in the code matching where matching the A HREFs, in the html page, I can't use CCS as there are also other button_small classes in some global headers in the webpages, which can get annoying to see an unnessacary icon at the wrong place; I just need it in the A HREF location. Thanks, SimplyA_Coder

Solution

Use CSS background property to add an image Or icon within Button.

Please see below Example. Adjust Padding, Margin, Icon etc. according to your needs.

.icon-button {
  background: url("https://i.sstatic.net/lwkZI.png") left center no-repeat;
  padding: 25px;
}

<!DOCTYPE html>
<html>

<body>
<input type="button" class="icon-button"/>
</body>
</html>