0
272
VistasHow can I merge 2 elements in HTML-CSS-JS?
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.
3 Respuestas
Responde la pregunta0
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>0
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!
0
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>