Cómo juntar botones en CSS sin separación entre sí

  • Autor Autor neutron21
  • Fecha de inicio Fecha de inicio
neutron21

neutron21

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
buenos días!! espero me puedan ayudar, necesito juntar 4 botones para que no tengo separación entre si y ocupen todo el lugar.

descarga.webp


cuento un poco que código le he puesto hasta ahora a los botones
grid-template-columns: le puse 4 columnas
cada botón le puse un width del 100% para que ocupen toda la columna
también le di un margen de 0 a lo mismo que padding y border pero aun asi no logro hacer que se junten.

si alguno me puede dar una mano con un código se lo agradecería ya que es para un cv que debo entregar para un curso, he leído developer mozilla, w3schools y no encuentro como hacerlo.

y otra cosa como un extra 😛
tengo que dar una función con js y la única que se me ocurrió es darle un evento a los botones para mandarlos a una url y me paso lo mismo busque y no encontré el código asi que lo tuve que agregar por html a los link, si alguno tiene idea como hacerlo se lo agradecería sino también podría recibir ideas de que función podría agregar con js al cv.

Espero me puedan ayudar y que tengan un lindo día!!
 
(imagen 1) Suponiendo que el div contenedor de los botones/divs mide 800px/width x height: 54px
Y dentro tienes 4 elementos/divs/li etc...
y que cada uno mide width: 114px; height: 44px; ...

(imagen 2) con display: flex; se juntan horizontal
(imagen 3) con justify-content: center; se centran
(imagen 4) con align-items: center; se alinean en medio
y ya con el width del div contenedor lo ajustas/reduces (width: 466px) y con margin: 0 auto; lo centras

Todo lo vas ajustando segun las dimensiones, grid-template-columns es hacia abajo en COLUMNA ...
 

Adjuntos

  • 2023-01-26_065503.webp
    2023-01-26_065503.webp
    1,2 KB · Visitas: 15
  • 2023-01-26_065650.webp
    2023-01-26_065650.webp
    1,2 KB · Visitas: 17
  • 2023-01-26_065959.webp
    2023-01-26_065959.webp
    1,1 KB · Visitas: 17
  • 2023-01-26_070117.webp
    2023-01-26_070117.webp
    830 bytes · Visitas: 18
Y sobre el js ...
A cada div/botton le agregas un id/ u otro class ... por ejemplo <div id='aqui> o div class="a aqui" >

Y si es mouseover, mouseleave, click, mouseenter, input/button, etc ... le agregas el codigo que quieres que haga, si moverse, cambiar, activar, cerrar/abrir, seleccionar, etc

JavaScript:
$("#aqui").mouseover(function () {


Aqui codigo


});


... o si es el div class ... $(".aqui")
 
hola gracias por la respuesta, si lo tuve que hacer los botones mediante html y css, por que no encontré como hacer la función del js para que al darle click me mande a otras url, asique lo hice de forma normal, pero lo quería hacer con js por que necesitaba para unas pruebas del curso
 
Atrás
Arriba