Como hacer una barra de búsqueda con efecto hover con html y css - Facil 

muchas gracias !

:3

Gracias !

😉

Gracias a ti!

Excelente, un gusto poder ayudarte

Gracias !

Juega con el position.

no me aparece a mi, sabes por que puede ser?? o otro modo para ponerlo

@@elpapu_9884 Hola amigo, ya ah pasado tiempo desde que publiqué este comentario y te recomiendo que no sigas este video porque al final este buscador solo me daba errores, te ayudaría mucho ver el curso completo de css del youtuber Soy Dalto

discord.gg/cpdvmp2t

codesandbox.io/s/barra-de-busqueda-lbjwo9

Con gusto

Hola Amigo 😃 sería de mucha ayuda que te suscribas al canal y le des un like al video, lo puedes hacer en el siguiente enlace bit.ly/3PzQMZ9 Te comento que ya agregue en el código de este enlace un ejemplo del input desplegándose hacia la derecha, espero que te sirva, saludos! codesandbox.io/s/barra-de-busqueda-forked-q47hzq

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9

​@@MarceloZairOjalá Diosito te lo múltiplique

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9

Hola Veronica, depende de como estes conectando la base de datos ya sea con el back o el front

@@MarceloZair Holaa, cual es la diferencia del back o front? yo conecto la base de datos (xampp) por html con php

@@MarceloZair solo quiero que desde el botón del búsqueda redirija como con 'href' a php y los datos que ingrese los busque en la base de datos, no se si se entiende?

@@veronicadarlinpinedaamaya5642 Hola me podrías dar más detalles al discord, marcelozair#1608

esta es ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3MxicuAGoxQ.html

Hola Laura, el tutorial solo muestra como hacer el diseño del buscado, la funcionalidad se desarrolla en base a tu sitio web

@@MarceloZair Hola , me puedes decir cómo hacer eso por favor

@@lauraibarraramos3704 claro, me podrías escribir a whatsapp wa.link/gbqh4b

Hola, el link que me diste es incorrecto me lleva con una persona que me dijo que estaba equivocada

De nada 😊

Hola bro, lo que necesitas hacer es registrarte en la página font awesome y una vez ahí te dan una cdn, esa cdn la debes colocar en head del html, y con eso al colocar el icono se podrá ver Te recomiendo este video , te indica el paso a paso para usarlo correctamente

@@MarceloZair gracias bro ya lo hice y me funciono a la perfeccion, ya tengo mi barra de busqueda bien

@@edgarmejia5356 perfecto ,😎

@@MarceloZair 😎

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9

Tendrías que agregar código javascript para darle funcionalidad al buscador

@@MarceloZair tendrás algún video o un ejemplo para basarme?

El hover a veces no se aplica en los móviles ya que es para pc al pasar el mouse, para que el hover sirva en móvil solo basta con hacer clic en el icono de la lupa y se hará el hover

Te dedicas a programar amigo? Te lo pregunto para ver si nos conocemos y hacer team

@@tomasalvarado4199 recien estoy comenzando solo se html y css. Ahora estoy aprendiendo Javascript. Un gusto bro

@@derianjaramillo449 estamos en las mismas, hay que animarnos bro.

@@tomasalvarado4199 claro que si bro

Hola, colocaste la cdn en el head del html ?

Hola, colocaste la cdn en el head del html ?

@@MarceloZair si, pero no me funciona, solo aparece la bolita de color, pero no la lupa (el ícono

@@Laura-uv9nj Te recomiendo este video, indica el paso a paso para usar los iconos ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-w7OSE1-8F8s.html

@@MarceloZair muchas gracias 😊 saludos

En el body defino algunos estilos para posicionamiento del buscador, solo tendrías que reacomodar el el buscador quitando esos estilos

@@MarceloZairsabes cómo hacer que cambie de forma el círculo? (El detalle fue que cuánto agregué un Narv a mi web, le cambio automáticamente la forma del círculo a cuadrado y no busco cómo volver a dejar de forma circular)

Depende de que quieres buscar

Hola Blim, esta comunidad de discord es muy activa discord.gg/Vv52E6Uf

@@MarceloZair dios me encantaría que ese enlace me funcionará, porque tengo un problema y es que puse exactamente el mismo código que vos pero no me funciona

@@julianlagos1043 espero que esto pueda ayudarte, es un enlace con el código del video ;) codesandbox.io/s/barra-de-busqueda-lbjwo9

Hola Felipe 😁, tendrías que ajustar las medidas del buscados, y utilizar porcentajes para que se acomoden a tu sitio web, en el ejemplo utilizo medidas con px que son estáticas, ayudaría muchísimo que te suscribieras al canal, puedes hacerlo aquí bit.ly/3PzQMZ9

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9

Hola que tal? , te refieres a esta .. fontawesome.com/

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9

Hola, el input:focus es una pseudo clase la cual nos permite realizar cambios de estilos en un elemento cuando se efectúa la acción de :focus, por ejemplo cuando hacemos clic en un Input y aparece la barrita para escribir, estamos haciendo focus en el Input, en este caso al hacer focus en el input queremos que los estilos del buscador se modifiquen :), espero que mi explicación sea de ayuda Saludos, !!

A ya quedó entendido gracias, pero en el video por qué se pone un width, a esa pseudo clase input. Gracias por tu respuestas👍 sigo tu canal. Interesantes videos.

para que te cargen los iconos debes colocar una cdn en tu head.

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9

Visual estudio code ?

@@MarceloZair Gracias:3

@@wendycisneros456 De nada :3

te invito a mi grupo de discord discord.gg/sCxuJJVwRx

@Marcelo Zair si jaja lo bueno es que dice que si le gusto porque o si no no hay mas desarolladores web en mi provincia

@Marcelo Zair ecuador

@@mishimishi9463 que parte bro?, Yo tmb soy de alli?

@@PROGAMERXable imbabura ibarra

Hola Diego, ayudaría mucho al canal si te suscribes y dejas tu like Este es el enlace del código codesandbox.io/s/barra-de-busqueda-lbjwo9

@Ytalo OG Estoy en lo mismo ayudaaaa XD

@@jonatan326 podría hacer un vídeo de eso, pero depende que tipos de búsqueda quieren realizar

@@MarceloZair bro que busque algo supon gamos yo debo hacer que busque de mi html ahi mismo busque si me entiendes

@@MarceloZair que busque mi html ya que creare 5 paginas digamoslo haci que busque como puedo hacer puedes hacer un video porfavor

@@changobalin2301 tratas de decir un buscador que busque tus demás páginas

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9

*{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ font-family: 'PT Sans' , sans-serif; display: flex; align-items: right; justify-content: right; height: 100vh; background: linear-gradient( #534f8a, #695be6); } .buscar{ position: absolute; top: 25px; right: 20px; padding: 5px; } .buscar input{ width: 0px; height: 40px; padding: 0 20px; font-size: 20px; color: : none; outline: 1px; border: 0px solid #111; border-radius: 90px; transition: all 0.8s ease; } .btn{ position: absolute; top: 0px ; right: 0px; background: #440080; width: 55px; height: 55px; line-height: 55px; text-align: center; color: white; font-size: 22px; border-radius: 80%; cursor: pointer; } .buscar:hover input{ width: 240px; } .buscar input:focus{ width: 240px; }

Hola, este es el código que aparece en el video, espero que te pueda ayudar codesandbox.io/s/barra-de-busqueda-lbjwo9