Crea iconos de redes sociales con efecto hover en HTML y CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ก.ย. 2024
  • En este video aprenderás a crear iconos de redes sociales con efecto hover utilizando HTML y CSS.
    No te olvides de visitar la página web y las redes sociales para estar al tanto de las publicaciones y nuevos tutoriales.
    ► Sitio Web: www.ugbtuts.com
    ► Facebook: / ugbtutoriales
    ► Twitter: / ugbtuts
    ► Instagram: / ugbtuts
    ► Pinterest: www.pinterest....
    ► Suscribete: goo.gl/gDPXBL
    ¡Puedes ayudar a que ugbtuts siga creciendo compartiendo el video, dándole "me gusta" y suscribiéndote al canal para que pueda seguir creando más tutoriales y de mejor calidad!

ความคิดเห็น • 76

  • @ux.rubenlopez
    @ux.rubenlopez 3 ปีที่แล้ว +5

    Usé tu tutorial como base, lo hice con Boostrap y SASS agregando algunos detalles adicionales a tu propuesta. Genio, gracias.

  • @joan7154
    @joan7154 3 ปีที่แล้ว +5

    si no les funciono lo de que cambie el color es por que usaron la variable del video
    prueben poniendo esto:
    .redes-container ul li .instagram:hover{
    background-color: #e4405f;
    }
    .redes-container ul li .youtube:hover{
    background-color: #bb0000
    }
    .redes-container ul li .facebook:hover{
    background-color: #3b5998
    }
    .redes-container ul li .pinterest:hover{
    background-color: #cb2027
    }
    .redes-container ul li .whatsapp:hover{
    background-color: #4dc247;
    }

  • @emanuelmontoya7161
    @emanuelmontoya7161 4 ปีที่แล้ว +28

    Te falto el link de de la libreria

  • @glpereyraar
    @glpereyraar 4 ปีที่แล้ว

    Muchisimas gracias! estoy estudiando hace recien dos meses y encontrar estos tutoriales me llenan! GRACIAS!

  • @merlynisabel1191
    @merlynisabel1191 4 ปีที่แล้ว

    Muchas Graciassssss .. saludos desde Venezuela aprendizaje en tiempos de pandemia.

  • @luisruizletsfight8880
    @luisruizletsfight8880 4 ปีที่แล้ว +1

    Excelente muy util super especifico y practico. Me resulto genial

  • @jaav7106
    @jaav7106 3 ปีที่แล้ว +2

    Explicas muy bien , gracias!

    • @javizame
      @javizame 3 ปีที่แล้ว

      Te puede interesar este video también: th-cam.com/video/Pr4vnqTTs9c/w-d-xo.html

  • @luisparra7487
    @luisparra7487 2 ปีที่แล้ว

    excelente tutorial bro, me resolvió las dudas que tenia gracias por compartirlo

  • @celenina20
    @celenina20 ปีที่แล้ว +1

    Por que no pasa el link del principio y te pide que lo vayas a buscar a google? Que cuesta pasarlo con la explicacion completa?

  • @FabioGMartinez
    @FabioGMartinez 5 ปีที่แล้ว

    Muchas Gracias. Super bien explicado.

  • @RicardoHernandezboconos
    @RicardoHernandezboconos 2 ปีที่แล้ว +6

    muy bueno tu tutorial hermano puedes compartir el código??

  • @erikdcr2567
    @erikdcr2567 2 ปีที่แล้ว

    gracias me sirvió de mucho para mi página web

  • @miatarjetas
    @miatarjetas 3 ปีที่แล้ว

    Excelente tutorial! Claro, simple y ágil, me ayudo mucho. Muchas gracias

  • @fabianayala1051
    @fabianayala1051 4 ปีที่แล้ว

    Te lo agradezco mucho es justo lo que necesitaba

    • @javizame
      @javizame 3 ปีที่แล้ว

      Te puede interesar este video también: th-cam.com/video/Pr4vnqTTs9c/w-d-xo.html

  • @lautarosantillan8649
    @lautarosantillan8649 2 ปีที่แล้ว

    Alto video, sos un genio

  • @joselabarca3328
    @joselabarca3328 ปีที่แล้ว

    Muy bueno el tutorial.

  • @raulescobar8741
    @raulescobar8741 3 ปีที่แล้ว

    en serio, muchas gracias!!!

  • @edwardc9997
    @edwardc9997 4 ปีที่แล้ว +5

    Pasa el codigo xfa

  • @emawolf7705
    @emawolf7705 3 ปีที่แล้ว +1

    Mejor que mi fucking curso pago, MIL GRACIAS!!!

  • @asiersanchezfrutos8023
    @asiersanchezfrutos8023 4 ปีที่แล้ว +1

    Maravilloso

    • @javizame
      @javizame 3 ปีที่แล้ว

      Te puede interesar este video también: th-cam.com/video/Pr4vnqTTs9c/w-d-xo.html

  • @federicodonadio5624
    @federicodonadio5624 4 ปีที่แล้ว

    Buen tutorial gato, muchas gracias!

  • @villcasilvavictorleon7503
    @villcasilvavictorleon7503 3 ปีที่แล้ว

    Graciassss. Sos un crack::after{content=" :)))) "}

  • @Desarrolladores-duo
    @Desarrolladores-duo 2 ปีที่แล้ว +1

    hola, sigo el código al pie de la letra y no me sirve, no se si talvez estoy en una versión mas actualizada, podrías ayudarme?

  • @gasparbrito2061
    @gasparbrito2061 3 ปีที่แล้ว

    nuevo suscriptor crack

  • @josezapata1793
    @josezapata1793 3 ปีที่แล้ว

    gracias!

  • @TheIvonegabriela
    @TheIvonegabriela 3 ปีที่แล้ว

    Excelente!!!

    • @javizame
      @javizame 3 ปีที่แล้ว

      Te puede interesar este video también: th-cam.com/video/Pr4vnqTTs9c/w-d-xo.html

  • @marlonperez5890
    @marlonperez5890 3 ปีที่แล้ว

    hola amigo a mi no me funciona el line-height en .redes-container ul li a.... no logro adaptar los iconos q queden centrados

  • @mauropereyra106
    @mauropereyra106 2 ปีที่แล้ว

    genio

  • @camiloandresrey8481
    @camiloandresrey8481 3 ปีที่แล้ว

    Cómo sería si quisiese que cuando señale una imagen se desenfoque el body? Saludos.

  • @joseantoniovaldez4030
    @joseantoniovaldez4030 ปีที่แล้ว

    Como y de donde sacan el link que colocan en el hade?. La mayoría q hacen tutoriales no lo demuestran esa parte. Debería ser completo el tutorial.

  • @Thomas_Keim1998
    @Thomas_Keim1998 4 ปีที่แล้ว +1

    Muchas gracias me funciono excepto por el cambio de color al pasar el mouse... No sé por que es ya que el código es el mismo. pero no importa, igual quedó bien. Gracias igual.

  • @pablete5236
    @pablete5236 2 ปีที่แล้ว

    Hola, ese link de los iconos de donde lo sacaste?

  • @aranif8510
    @aranif8510 3 ปีที่แล้ว

    De donde sale el lik que tienes al principio?

  • @gauntle1000
    @gauntle1000 ปีที่แล้ว

    bro, donde encuentro el link?

  • @Frankslaboratory
    @Frankslaboratory 5 ปีที่แล้ว +1

    Nice

  • @RVKAWAAA
    @RVKAWAAA 4 ปีที่แล้ว

    Alguien me dice de donde salio el crossorigin y integrity?

  • @DandalyMV
    @DandalyMV 3 ปีที่แล้ว

    Cómo le quitas el margen a la izquierda?, si te fijas no está centrado.

    • @pedroolivas_
      @pedroolivas_  3 ปีที่แล้ว

      qué margen a la izquierda?

  • @julianchaves1950
    @julianchaves1950 3 ปีที่แล้ว

    de donde saco la libreria?

  • @skipper3383
    @skipper3383 2 ปีที่แล้ว

    De donde saco el link de la librería.?

    • @pedroolivas_
      @pedroolivas_  2 ปีที่แล้ว

      Internet, se llama Font Awesome.

  • @1hicks475
    @1hicks475 3 ปีที่แล้ว

    ¿Sería estético en una tienda en línea?

    • @pedroolivas_
      @pedroolivas_  3 ปีที่แล้ว

      A qué te refieres con eso?

    • @1hicks475
      @1hicks475 3 ปีที่แล้ว

      @@pedroolivas_ Nada excelente aportación.

  • @willianalmeida2784
    @willianalmeida2784 4 ปีที่แล้ว +1

    Muy buen video, pero si quiero agregar otra red social como gmail ¿cómo haría?

    • @pedroolivas_
      @pedroolivas_  4 ปีที่แล้ว

      Es el mismo proceso, nada más busca el icono que corresponda en Font Awesome

    • @javizame
      @javizame 3 ปีที่แล้ว

      Te puede interesar este video también: th-cam.com/video/Pr4vnqTTs9c/w-d-xo.html

  • @johanjherlibecerraventura3242
    @johanjherlibecerraventura3242 3 ปีที่แล้ว

    como lo podemos poner los iconos en la parte superior isquierda

  • @angelolopez5161
    @angelolopez5161 2 ปีที่แล้ว

    aguien me dice mo seria en js

  • @luispitre5449
    @luispitre5449 ปีที่แล้ว

    ¿Puedes compartir el codigo HTML y CSS?

  • @finanzas374
    @finanzas374 2 ปีที่แล้ว

    Me salió lo de facebook pero WhatsApp y demás no y eso que copié así como lo describes hay

  • @choster9008
    @choster9008 4 ปีที่แล้ว +1

    wey y el link de las librerias ?

  • @cybermatematica
    @cybermatematica 4 ปีที่แล้ว

    y para pegar a mi blog

  • @franciscogodoy8913
    @franciscogodoy8913 3 ปีที่แล้ว +1

    Todo bien todo azul, pero pone el link y el meta.

  • @aronhiroshifukuokaprado2067
    @aronhiroshifukuokaprado2067 ปีที่แล้ว

    no me funciono

  • @andresayala2767
    @andresayala2767 3 ปีที่แล้ว

    Muy bueno, pero no me sale color en los iconos :(

    • @pedroolivas_
      @pedroolivas_  3 ปีที่แล้ว

      Algo te estará faltando