Botón de Luz de Neón con Css

Поделиться
HTML-код
  • Опубликовано: 23 дек 2024

Комментарии • 96

  • @agustinflores614
    @agustinflores614 2 года назад +13

    Me encanta como te tomas el tiempo de explicar propiedad por propiedad de manera que se entienda para que sirve cada uno, jodido crack, muchas gracias por el tutorial!

    • @SLeeDw
      @SLeeDw  2 года назад +1

      Muchas gracias por tu comentario. Saludos y Bendiciones 🙌💻

  • @SLeeDw
    @SLeeDw  4 года назад +1

    Suscríbete ✅ para más vídeos tutoriales de proyectos web 💻
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    🌐 Visita mi sitio web para más recursos 👇🏻:
    - bit.ly/sleedw
    📱 Únete a nuestra comunidad en WhatsApp y comparte tus proyectos o dudas que tengas 👇🏻:
    - bit.ly/sleedw-grupo-whatsapp
    🔵 Síguenos en Facebook 👇🏻:
    - bit.ly/face-oficial-sleedw
    ▶ Saludos y que Dios te bendiga. 🙌

  • @terminal-a2991
    @terminal-a2991 4 года назад +4

    Simplemente increible tu metodo, continua con esto amigo.

    • @SLeeDw
      @SLeeDw  4 года назад

      Muchas gracias por tu comentario💻🙌, seguiremos subiendo más vídeos tutoriales de éstas categorías.
      Saludos y Éxitos...☺💻

    • @SLeeDw
      @SLeeDw  4 года назад +1

      Muchas gracias por tu comentario💻🙌, seguiremos subiendo más vídeos tutoriales de éstas categorías.
      Saludos y Éxitos...☺💻

  • @aprendehaciendo1298
    @aprendehaciendo1298 3 года назад +3

    Muchas gracias, justo era lo que estaba buscando para añadirle a una página web.

    • @SLeeDw
      @SLeeDw  3 года назад +1

      Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga 🙌💻

  • @XFEINX
    @XFEINX 3 года назад +8

    Muy bueno! Ando aprendiendo y practicando CSS y esto me acaba de mostrar la infinidad de posibilidades que hay en CSS! Gracias por el video, iré a ver los demas. Nuevo sub :)

    • @SLeeDw
      @SLeeDw  3 года назад +1

      Hola, muchas gracias por el apoyo, saludos y Dios te bendiga.

    • @XFEINX
      @XFEINX 3 года назад +1

      @@SLeeDw Sigan con el buen trabajo :D

    • @PabloTechOK
      @PabloTechOK 2 года назад

      lo agregue a mi menu, el problema que los span aparecen fuera de mi nav, como puedo solucionarlo no encontre como bajarle la distancia entre los span y el texto del menu

  • @digitalstablerds2498
    @digitalstablerds2498 Год назад

    jaja 😁 voy por el minuto 5:50 y me esta saliendo super chulo gracias..

  • @tiktokskillu6868
    @tiktokskillu6868 4 года назад +5

    Me encanta tu canal la verdad que suerte toparme con tigo, Gracias bro.

    • @SLeeDw
      @SLeeDw  4 года назад +1

      Hola muchas gracias por tu comentario bro, Saludos y Éxitos🙌💻

  • @facundodtd
    @facundodtd 3 года назад +2

    muchas gracias! estoy comenzando y esto me inspira, ojalá pueda llegar a escribir todo así de rápido algún día jaja, saludos y nuevo sub

    • @SLeeDw
      @SLeeDw  3 года назад +2

      Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga 💻🙌

    • @SLeeDw
      @SLeeDw  3 года назад

      @Miguel Hola, muchas gracias por tu comentario, quisiera ayudarte con tu problema por el medio de nuestro grupo de whatsapp.. Te invito a que te unas y ahí realices tu consulta. Saludos y Dios te bendiga🙌💻

  • @cristiandelrio2645
    @cristiandelrio2645 3 года назад +2

    Perfecto mi amigo, muchisimas gracias, suscribido !!
    Encima lo subiste a un repositorio, muchisimas gracias, me sirve para copiar y pegar !!

  • @panconmermelada1934
    @panconmermelada1934 3 года назад +1

    se ve perrisimo toma tu like

    • @SLeeDw
      @SLeeDw  3 года назад

      Muchas gracias amigo, Saludos y Dios te bendiga 💻🙌

  • @matias25pinto
    @matias25pinto 3 года назад +3

    gracias por este video muy bueno sencillo sin complicarse

    • @SLeeDw
      @SLeeDw  3 года назад +1

      Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga 🙌💻

  • @carloscampos2487
    @carloscampos2487 3 года назад +3

    Muchas gracias amigo, esta muy bueno el efecto. Sigue así amigo Bendiciones.
    Me suscribo :D

    • @SLeeDw
      @SLeeDw  3 года назад

      Hola, MUCHAS GRACIAS por tu apoyo a éste canal, Saludos y Dios te bendiga 💻☺

  • @camila2121
    @camila2121 4 года назад

    gracias brou, por compartir tus conocimientos, exitos

  • @deissyvivianaduranrodrigue507
    @deissyvivianaduranrodrigue507 3 года назад

    esta genial! muchas gracias por enseñarlo y compartirlo!

  • @diegov.4133
    @diegov.4133 4 года назад +2

    que crack eres, gracias y saludos sigue subiendo videos me suscribire ;D

    • @SLeeDw
      @SLeeDw  4 года назад

      Hola, muchas gracias por comentar, y apoyar a este canal de desarrollo web, próximamente estaré subiendo mas tutoriales.
      Saludos y Éxitos Crack..

  • @julianvillada6576
    @julianvillada6576 3 года назад +1

    brutal , mil gracias

  • @electroinovacion5529
    @electroinovacion5529 Год назад

    que lindo exlente video

  • @Luu_sebas
    @Luu_sebas 3 года назад +2

    BUENISIMO AMIGOOOOO

    • @SLeeDw
      @SLeeDw  3 года назад +1

      Muchas gracias, Saludos y Dios te bendiga🙌💻

  • @verdino.1844
    @verdino.1844 2 года назад

    videazo

  • @Miilum
    @Miilum 3 года назад +1

    Joder que buen boton

    • @SLeeDw
      @SLeeDw  3 года назад

      Muchas gracias amigo, Saludos y Dios te bendiga 💻🙌

  • @ellecandy6124
    @ellecandy6124 4 года назад +1

    Wow, amigo. Muchas gracias!

    • @SLeeDw
      @SLeeDw  4 года назад +1

      Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga..

  • @pisandoflechitas5294
    @pisandoflechitas5294 3 года назад +1

    GENIO...!!

  • @dahianabasigaluz7971
    @dahianabasigaluz7971 Год назад

    buenas, sabes que hice tu código y en un principio me funciono perfecto, luego de un rato al abrir la web me quedaban dos líneas a los costados por lo que re hice el código a ver qué le pasaba y ahora no me hace el efecto de la luz que recorre el cuadrado, qué podría ser? soy estudiante y no me llevo muy bien con el diseño web

  • @Unimaz_Studios
    @Unimaz_Studios 4 года назад +2

    Buen video bro. Like, y gracias

    • @SLeeDw
      @SLeeDw  4 года назад

      Muchas Gracias a ti por ver el video ☺️!! que bueno que te gustó nuestro contenido...👏
      No olvides en apoyarnos en suscribirte a este canal y si no es de molestia compartirlo con tus amigos, para seguir creciendo y trayendo más contenidos como estos☺️
      Saludos y Exitos bro!!✋

  • @curiosoelgato
    @curiosoelgato 2 года назад +1

    Buenísimo. Gracias ;)

    • @SLeeDw
      @SLeeDw  2 года назад

      Muchas gracias por tu comentario. Saludos y Bendiciones 🙌💻

  • @SAM-py3fr
    @SAM-py3fr 3 года назад

    Se le podria meter a los span
    como un animation infinite?

  • @caminoalmillon007
    @caminoalmillon007 10 месяцев назад

    muchas gracias

  • @_ghzt_4479
    @_ghzt_4479 8 месяцев назад

    Pregunta, cómo podría usar este efecto en un botón? y en determinado caso hacer más efectos? T.T

  • @ortizbureloernestocrisofor5185

    Excelente video 👍

  • @El_viejo_Ricky
    @El_viejo_Ricky 3 года назад

    bro una pregunta sirve para la tienda en linea?

  • @electroinovacion5529
    @electroinovacion5529 Год назад

    como agrando el boton porfa

  • @soyjacob001
    @soyjacob001 4 месяца назад +1

    bro no me sale los efecctos de luz y no se puso en el centro que hago

    • @SLeeDw
      @SLeeDw  4 месяца назад +1

      @@soyjacob001 Buenas, te invito a que te unas al grupo de WhatsApp para poderte ayudar por ese medio (link en la descripción). Saludos

  • @dyanetc7437
    @dyanetc7437 4 года назад +1

    excelente amigo

  • @aylre7599
    @aylre7599 8 месяцев назад

    Estoy revisando, la última linea, del span4 se queda estática desde un inicio, ¿Alguien sabe pq?, ya revisé todo :')

  • @alandacikdsk3366
    @alandacikdsk3366 3 года назад

    la practica la puedo hacer en android o solo se puede hacer en una pc?

  • @memesgamesappymasxd3617
    @memesgamesappymasxd3617 3 года назад +1

    Bro que tal? Coloque ese código en Blogger y tiene problemas con las dimensiones o ajuste de pantalla sabrás por que?

  • @pabitlus
    @pabitlus 2 года назад

    Muy lindo el Botón. Gracias. Por alguna razón que desconozco, el efecto de la luz que pasa por el marco no se produce. El resto funciona bien. ¿Alguna idea?

  • @FerchumanX86
    @FerchumanX86 2 года назад

    muy bueno
    😀

  • @Henry_Nunez
    @Henry_Nunez 2 года назад

    😊👍

  • @darthzoom
    @darthzoom 3 года назад

    Funciona para blogger?

  • @josmarpena396
    @josmarpena396 2 года назад

    hola buenas noches hermano como estas muy bueno tu video que sigan tus exitos en el nombre de Dios una pregunta hermano ese codigo del video se puede colocar en un blog de blogger porque intente y me no me sale bro

  • @antoniocapillamedel6758
    @antoniocapillamedel6758 4 года назад

    que entorno de desarrollo usas?

  • @sergioarcinpar
    @sergioarcinpar 4 года назад

    Cómo haces para previsualizar lo que haces a la derecha?

  • @valentinmorello2279
    @valentinmorello2279 4 года назад

    como se puede hacer para que ocurra sin poner el mouse por encima?

  • @angelfigueroa6662
    @angelfigueroa6662 3 года назад

    que buen efecto, amigo, me prodrías ayudar a saber cómo hacer el efecto de pasar el mouse y que se vea como una luz? es decir una imagen y al pasarle el mouse se vea así como si le pasaras una luz por encima, no sé cómo se llama ese efecto y me gusta mucho

  • @carlosj.castillo254
    @carlosj.castillo254 3 года назад +1

    se ve bien chido XD

    • @SLeeDw
      @SLeeDw  3 года назад

      Muchas gracias, Saludos y bendiciones💻🙌

  • @davidcarrasco1640
    @davidcarrasco1640 4 года назад +1

    Nuevo sub camarada

    • @SLeeDw
      @SLeeDw  4 года назад +1

      Genial!! Bienvenido a la comunidad de programadores web. Muchas gracias por apoyar a este canal, Saludos y Éxitos crack 💻🙌

  • @avdarky4075
    @avdarky4075 4 года назад +1

    que buena crack

    • @SLeeDw
      @SLeeDw  4 года назад

      Muchas gracias bro, Saludos y Éxitos💻

  • @matiaslagorio6762
    @matiaslagorio6762 2 года назад

    lo pude hacer pero,no me toma las lineas de los bordes

  • @tequila.
    @tequila. 3 года назад +1

    Muy buen video, alguien me puede ayudar?, sucede que la etiqueta id no me colorea dentro de span, y no funciona.

    • @SLeeDw
      @SLeeDw  3 года назад +1

      Hola, muchas gracias por tu comentario, respecto a tu petición, me gustaría compartirte el código de este proyecto, que esta en el siguiente enlace -> sleedweb.ga/botonneon , para que hagas una comparación con tu proyecto realizado. Saludos y Dios te bendiga..

    • @tequila.
      @tequila. 3 года назад +1

      Muchas gracias, si lo pude resolver, lo puse envío de las dos etiquetas de Span cuando era dentro de la primera, de nuevo Gracias e igualmente Dios te bendiga. ❤️

  • @raulestebanpuentesroldan8292
    @raulestebanpuentesroldan8292 2 года назад +1

    Buen dia, que extensiones usas en el editor de texto para que pinte esas lineas de guia intermitentes del fondo?

  • @IsaacSpace
    @IsaacSpace 3 года назад

    buenas que tal, hace tiempo busco algo asi, pero que ya este activo la animacion del principio al entrar la pagina, para que sea menos estatica, como me recomiendas hacer esto? Transitions y animations? como lo harias? saludos y buen video

  • @danielmarquez7811
    @danielmarquez7811 4 года назад +1

    felicitaciones .

    • @SLeeDw
      @SLeeDw  4 года назад

      Muchas Gracias amigo, Saludos y Éxitos crack🙌💻

  • @julianfelipeangaritaalarcon
    @julianfelipeangaritaalarcon 3 года назад

    buen video bro, tengo un problema con poner un título, ¿cómo puedo ubicar bien el título arriba y cómo puedo poner varios botones ordenadamente? espero puedas responder bro, gracias.

    • @XFEINX
      @XFEINX 3 года назад

      Ordenados cómo bro? Pudiste hacerlo? No soy el del canal pero quizá te puedo ayudar si aún ocupas ayuda.

  • @lehiavelsol9788
    @lehiavelsol9788 3 года назад +1

    Yo solo ocupo la linea que sale encima del botón, espero tener éxito de ser así se los hare saber.
    Tengo miedo ggg

  • @danie125
    @danie125 3 года назад +2

    Aqui estan los codigos de HTML Y CSS.
    ( No me sale como al diseñador, alguien mas le sale distinto ? )


    Botón de Luz de Neón con CSS









    BOTON NEON







    ___________________________________
    body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #1a0321;
    font-family: fantasy;
    }
    .btn-neon{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color:#fff;
    letter-spacing: 4px;
    font-size: 24px;
    text-decoration: none;
    overflow: hidden;
    transition: 0.2s;


    }
    .btn-neon:hover{
    background: #a945c7;
    box-shadow: 0 0 10px #412a47, 0 0 40px #a945c7,0 0 80px #a945c7;
    transition-delay: 1s;
    }
    .btn-neon span {
    position: absolute;
    display: block;
    }
    #span1{
    top:0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#a945c7);
    }
    .btn-neon:hover #span1{
    left: 100%;
    transition: 1s;
    }
    #span3{
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#a945c7);
    }
    .btn-neon:hover #span3{
    right: 100%;
    transition: 1s;
    transition-delay: 0.5s;
    }
    #span2{
    top: -100;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#a945c7);
    }
    .btn-neon:hover #span2{
    top: 100%;
    transition: 1s;
    transition: 0.25s;
    }
    #span4{
    bottom: -100;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#a945c7);
    }
    .btn-neon:hover #span4{
    bottom: 100%;
    transition: 1s;
    transition: 0.75s;
    }

  • @vazquez1240
    @vazquez1240 3 года назад

    Alguien sabe si se le puede poner un link?

    • @Henry_Nunez
      @Henry_Nunez 3 года назад

      Claro amigo. El lo dijo en este video. Fíjate bien: lo puedes poner dentro de las comillas el enlace. Toca este número para que te lleve directo al punto 👉 1:22 👈

  • @redhoot9931
    @redhoot9931 3 года назад

    Mi span 2 no baja

  • @ru31k32
    @ru31k32 4 года назад +5

    Ya que usaste el tutorial de otro, por lo menos mencionalo.
    Original: ruclips.net/video/ex7jGbyFgpA/видео.html

    • @santiagoduarte7077
      @santiagoduarte7077 4 года назад

      por lo menos lo explico el otro no y ademas en ingles.

    • @ru31k32
      @ru31k32 4 года назад +1

      @@santiagoduarte7077 no estoy criticando tu vídeo. Solo comentaba que no está de más, si has basado tu vídeo en otro, mencionarlo.
      En cuanto al idioma, no veo que tiene de malo que sea en inglés.

    • @Henry_Nunez
      @Henry_Nunez 3 года назад

      Entonces yo para escribir el código también debo mencionar al creador de Visual Studio Code y al que hizo el programa CSS y al que inventó el HTML

    • @ru31k32
      @ru31k32 3 года назад +1

      No he dicho eso en ningún momento. Tan solo he comentado que si usaba el vídeo de otra persona (ya sea como inspiración o como base) que no es tan mala idea mencionarlo.
      No he dicho nada de código ni que deba mencionar al creador o creadores de las herramientas que vaya a usar.
      Considero que son dos cosas distintas, por un lado tienes las herramientas como el VSCode o el lenguaje de programación que si buscas un momento por Internet encuentras quien lo hizo y demás. Distinto es que hayas visto un vídeo en otro idioma, que te haya gustado y decidas trasladar la idea/concepto a otro idioma.
      En ese caso y bajo mi opinión, no está de más mencionar de donde te viene esa idea. De nuevo, es una opinión personal.

  • @alessander_gg
    @alessander_gg 2 года назад

    Bro quiero unirme a tu grupo de wasap

  • @raulcisnes6782
    @raulcisnes6782 3 года назад

    Cómo puedo agregarle una imagen arriba del botón?