0
139
Views¿Cómo puedo fusionar 2 elementos en HTML-CSS-JS?
Quiero fusionar 2 elementos (botones, para ser precisos) en 1 en HTML y CSS, con Javascript, si es necesario.
Aquí está el código HTML-CSS:
#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>Esto produce 2 botones, uno al lado del otro, pero no fusionados. Incluso anidar botones dentro de otro no ayuda. ¿Qué tengo que hacer?
Así es como quiero que se vea mi botón (excluyendo el fondo gris, por supuesto):
La imagen se hizo en
Figma, si alguien se lo preguntaba.
3 answers
Answer question0
Puedes intentar algo como esto:
.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
¿Podría explicar un poco más sobre lo que realmente quiere hacer? Por lo que parece, primero pensaría que solo quieres tener 1 Botón con un ícono y texto.
En este caso, podría simplemente <button id="downloadButton">Download <span id="downloadButtonIcon"></span></button> y diseñar el lapso en consecuencia para mostrar el ícono. Si esta no es su intención, aclare como se indicó anteriormente.
0
No necesita usar 2 botones para mostrar un ícono/imagen en el fondo de un botón. Simplemente use position: relative; para el botón y la position: absolute; para la imagen Luego puede ajustar la ubicación de la imagen usando los atributos top-left-right-bottom . El siguiente código expande la imagen para que cubra el botón por completo.
<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>