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

neutron21

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
10 Abr 2014
Mensajes
674
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.png


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 :p
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!!
 

Puko

Delta
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Dic 2022
Mensajes
683
(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.jpg
    2023-01-26_065503.jpg
    6 KB · Visitas: 14
  • 2023-01-26_065650.jpg
    2023-01-26_065650.jpg
    5,3 KB · Visitas: 14
  • 2023-01-26_065959.jpg
    2023-01-26_065959.jpg
    5,1 KB · Visitas: 16
  • 2023-01-26_070117.jpg
    2023-01-26_070117.jpg
    3,5 KB · Visitas: 17
Upvote 0

Puko

Delta
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Dic 2022
Mensajes
683
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")
 
Upvote 0

neutron21

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
10 Abr 2014
Mensajes
674
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
 
Upvote 0

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba