How can I merge 2 elements in HTML-CSS-JS?

Question

I want to merge 2 elements(buttons, to be precise) into 1 in HTML & CSS, with if needed, Javascript.
Here's the HTML-CSS 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>

This produces 2 buttons, side-by-side, but not merged together. Even nesting buttons inside another doesn't help. What should I do?

Here's how I want my button to look like(exclude the gray background, of course.):

The Image was made in Figma, if anybody was wondering.

Check out `position: absolute;` and see if it helps: https://www.w3schools.com/css/css_positioning.asp — ᴓᴓᴓ, Oct 15 '21 at 15:47
Why do you have two buttons? Do you simply want an icon on your first button? see: [HTML/CSS - Adding an Icon to a button](https://stackoverflow.com/questions/3490216/html-css-adding-an-icon-to-a-button) — pilchard, Oct 15 '21 at 15:47
@pilchard, Sir, I have two buttons as I want to merge them and make them look as if there is just one button but with two sections. — InfoDaneMent, Oct 16 '21 at 10:43
@depperm, Yeah I made the colors different purposefully because as I have the intent of merging them, there background should look different so they can be distinguished from one another. — InfoDaneMent, Oct 16 '21 at 10:45
I don't usually post w3schools links but [How TO - Button Group](https://www.w3schools.com/howto/howto_css_button_group.asp) — pilchard, Oct 16 '21 at 10:53

score 1 · Accepted Answer · answered Oct 15 '21 at 15:57

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>

score 0 · Answer 2 · answered Oct 15 '21 at 15:50

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!

score 0 · Answer 3 · answered Oct 15 '21 at 15:56

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>

How can I merge 2 elements in HTML-CSS-JS?

3 Answers3