I want to merge 2 elements(buttons, to be precise) into 1 in HTML, CSS & Javascript if needed. Here's the HTML code:

#downloadButtonDiv {
  display: flexbox;
  justify-content: left;
}

#downloadButton {
  background-color: #00B0F0;
  margin: 5px;
  border: 1px;
  border-color: #00B0F0;
  outline: none;
  border-radius: 5px;
  padding-right: 0cm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 275px;
}

#downloadButtonIcon {
  background-color: #23a5d4;
  margin: 5px;
  border: 1px;
  border-color: #23a5d4;
  outline: none;
  border-radius: 5px;
  padding-left: 0cm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 120px;
}

<div id="downloadButtonDiv">
  <button type="button" id="downloadButton">Download</button>
  <button type="button" id="downloadButtonIcon"><img src="#" width=50/></button>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This produces 2 buttons, side-by-side, but not merged together. Even nesting buttons inside another doesn't help. What should I do? Please tell me if you need more specifications like image of the result.

Thank You!

CodePudding user response：

Could you explain a bit more about what you actually want to do. From the looks of it, I'd first think that you just want to have 1 Button with an icon and text.

In this case you could just <button id="downloadButton">Download <span id="downloadButtonIcon"></span></button> and style the span accordingly to show the icon. If this is not your intent, please clarify as stated above!

CodePudding user response：

You don't need to use 2 buttons to display an icon/image on the background of a button. Simply use position: relative; for the button and position: absolute; for the image. Then you can adjust the location of the image using top-left-right-bottom attributes. The code below expands the image so that it covers the button completely.

<style>

#downloadButton {
    position: relative;
    background-color: #00B0F0;
    margin: 5px;
    border: 1px;
    border-color: #00B0F0;
    outline: none;
    border-radius: 5px;
    padding-right: 0cm;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    height: 75px;
    width: 275px;
}

#downloadButton img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

</style>

<button id="downloadButton">
    Download
    <img src="#" alt="">
</button>

CodePudding user response：

You can try something like this:

.downloadButton {
  display: grid;
  grid-auto-flow: column;
  place-items: center;

  background-color: #00B0F0;
  margin: 5px;
  border: 1px;
  border-color: #00B0F0;
  outline: none;
  border-radius: 5px;
  padding-right: 0cm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 275px;
}

  <button type="button" class="downloadButton"><img src="https://picsum.photos/32/32" width=50/><span>Download</span></button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>