Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Estilos en los botones

14/17
Recursos

Aportes 133

Preguntas 25

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

NOTA: En el box-shadow del **hover **del boton, el estilo que en verdad va es este:

main .main-buttons button:hover {
    border: 1px solid #c6c6c6;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    color: #222;
    background-color: #f8f8f8;
}```

Al pasar el cursor pasaban dos cosas que faltaron según yo:
1.- El botón donde no estaba activo el hover se desplazaba un pixel, lo cual parecia que se movía. Lo arregle poniéndole un borde del mismo color del background.
2.- Faltaba agregarle el cursor: pointer.
ESPERO LES SIRVA

Hace falta el cursor: pointer

main .main-buttons button:hover {
    border: 1px solid #c6c6c6;
    box-shadow: 0 1px 1px #a5a5b4;
    color: #222;
    cursor: pointer
}

lo de display inline es un muy buen tip. cuando traté de hacer el clon por mi cuenta, usé el display:flex con justify-content:space-between pero tocaba mover mucho el padding y el margin, con el display inline te ahorras todo eso y queda mucho mejor. Excelente clase.

Efectos de sombra CSS
La propiedad text-shadow de CSS aplica sombra al texto.
La propiedad box-shadow de CSS aplica sombra a los elementos.

Para los pequeños detalles, al hacer hover en cualquiera de los dos botones estos tenían un desplazamiento inverso en su dirección. En la página de google esto no sucede, me di cuenta que se debía a que en se había definido un border 0 sin hover y border 1 con el hover.
Lo solucioné aplicando un borde de 1px completamente transparente

como evito el salto de los botones al hacer hover ?

Esta sombra es mas parecida a la que usa google: box-shadow: 0 1px 1px rgba(0,0,0,0.1);

Yo lo coloqué los botones uno al lado del otro y ambos en el centro así:

main .main-buttons{ display: flex; align-items: center; justify-content: center; }

En la clase donde seleccionamos el boton, en mi opinión no le debemos colocar border:0. Esto causa que el efecto hover se vea algo raro.
Yo lo colocaría así:

main .main-buttons button {
border: 1px solid transparent;
}

Así cuando hago hover no se ve ese efecto raro.

Código para interacción de botón Me siento con suerte: I’m Feeling Lucky

Modifiqué un poco el **box-shadow ** que se le agrega a los botones al hacer hover para que se parezca más a lo que hay en Google.

box-shadow: 0 1px 1px rgba(0,0,0,0.1);

Si quieren la replica más exacta, esta es la sombra del hover de Google:
🔥🔥🔥box-shadow: 0 1px 1px rgba(0,0,0,1);🔥🔥🔥

Hay que personalizar un poco 😃

Editor del logo: https://www.festisite.com/logo/google/

Así me quedaron los estilos para clonar lo mas que pude a los originales de Google, poco a poco mi clon chino estará en el mercado jaja.

igual se puede colocar 😄

main .main-buttons{
  width: 530px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

Siempre hay que estar pendiente. Un simple punto y como (😉 hace que distorsione una parte.

muy buena la explicacion, se supone que ya deberiamos saber los conceptos porque es un curso practico pero igual los explica y hasta hace que quede mas claro algunos temas que capaz no habian quedado claro en cursos anteriores

Les dejo el box-shadow exacto de google

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

Y ¿Cuál es la diferencia entre inline e inline-block?

Noten cuando pasamos sobre en un botón, el de al lado se mueve. Para que esto no ocurra resten el pixel del border al padding.

Prueben con este código para el hover 😃

Cuando ingresamos a la página de Google, el cursor se activa automaticamente en el input y solamente es escribir.

Para esto usamos el atributo Autofocus y los usamos en la etiqueta input de nuestro archivo html:

<input type="text" autofocus>

Genial, este esta siendo un gran curso

tiene un pequeño detalle el color y el efecto hover .Botones


💪💚

No se me da mucho aquello del diseño y la maquetación, pero en este curso he aprendido lo que no aprendí con Leonidas ni Rulótico… Ya iba siendo hora O____O

Les comparto este archivo de MDN Web Docs donde explica la sintaxis de box-shadow: https://developer.mozilla.org/es/docs/Web/CSS/box-shadow

La fuente de letra es la Roboto
<link rel=“preconnect” href=“https://fonts.gstatic.com”>
<link href=“https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap” rel=“stylesheet”>

CSS rules to specify families:
font-family: ‘Roboto’, sans-serif;

codigo del video 😄…

main .main-buttons{
width:530px;
margin:0 auto;
}

main .main-buttons div{
display: inline-block;
}

main .main-buttons button{
height: 36px;
background-color: #f2f2f2;
border:0;
font-size:14px;
color:#5f6368;
border-radius: 5px;
padding: 0 15px;
margin-right: 15px;
}

main .main-buttons button:hover{
border:1px solid #c6c6c6;
box-shadow: 0 1px 1px #000001;
color:#222;
}

main .main-buttons {
    width: 530px;
    margin: 0 auto;
}

main .main-buttons div {
    display: inline;
}

main .main-buttons button {
    height: 36px;
    background-color: #f8f9fa;
    border: none;
    font-size: 14px;
    color: #3c4043;
    border-radius: 4px;
    padding: 0 16px;
    margin: 11px 4px;
}

main .main-buttons button:hover {
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
}

El hover en los botones lo maneje de la siguiente forma:

main .main-buttons div button:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
  border: 1px solid #dadce0;
  color: #202124;
} 

para evitar que los botones se muevan 1 pixel:
modifiqué las primeras dos lineas para evitar que se mueva

main .main-buttons button:hover{
    border: 0px solid #c6c6c6;
    box-shadow: 0px 1px 3px #000001;
    color: #222;
    background-color: #f8f8f8;
    cursor: pointer;
}

puse border 0px y en box-shadow puse 0px 1px 3px

Estos son los valores reales actualmente en Google, por si quieren probar:

main .main-buttons button{
    height: 36px;
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    font-size: 14px;
    color: #3c4043;
    border-radius: 4px;
    padding: 0 16px;
    cursor: pointer;
}

main .main-buttons button:hover{
    border: 1px solid #dadce0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    color: #202124;
    background-color: #f8f9fa;
}

Es bastante tema. Fácil de entender, mucho por practicar.

Yo cuando alinie los botones lo hice con flex.

Display: inline-block;, herramienta útil para alinear los elementos.

código de la clase:

main .main-buttons  div {
    display: inline-block;
}

main .main-buttons button {
    height: 36px;
    background-color: #f2f2f2;
    border: 0;
    font-size: 14px;
    color: #5f6368;
    border-radius: 5px;
    padding: 0 15px;
    margin-right: 15px;
   
}

main .main-buttons button:hover {
    border: 1px solid #c6c6c6;
    box-shadow: 0 1px 1px #000001;
    color: #222
}

En CSS para el hover de los botones, funciona más parecido de esta manera:

main .main-buttons button:hover
 {
    border: 1px solid #c6c6c6;
    box-shadow: 0 0 1px 0 #a5a5b4;
    color: #222

}**

Tenia un problema al poner el cursor sobre los botones y es que el otro botón se movía 2px, lo que hice para solucionarlo fue reducirle 2px al margin al momento de hacer :hover así:

main .main-buttons button:hover {
    border: 1px solid #dadce0;
    color: black;
    box-shadow: 0 1px 1px #dadce0;
    margin-right: 14px;
}

El input esta muy pegado al icono de búsqueda por lo que no se ve bien. se puede resolver colocando un paddin hacia la derecha de 13px

padding-right: 13px;

y tambien para que se vea mas parecido la fuente del input es de 16px

font-size: 16px;

Para evitar el salto al hacer hover.

Usé los colores que mas se asemejan al original de google:

main .main-buttons button {
  height: 36px;
  background-color: #f2f2f2;
  border: 1px solid transparent; /* Added this line cuz buttons moved 1px on hover when border:0 */
  font-size: 14px;
  color: #5f6368;
  border-radius: 5px;
  padding: 0 15px;
  margin-right: 15px;
  cursor: pointer;
}
main .main-buttons button:hover {
  border: 1px solid #dadce0;
  color: #202124;
  box-shadow: 0 1px 1px rgba(0,0,0,.1); /* Extracted using dev tools color picker */
}

Hola! Excelente clase, para las personas que sienten que la sombra está un poco oscura pueden poner:

main .main-buttons button:hover {
    border: 1px solid #c6c6c6;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 10%); /*10% de opacidad lo hace ver más claro*/
    color: #222;
    background-color: #f8f8f8;
    cursor: pointer;
}

De hecho este dato lo tomé al inspeccionar la página de Google 😃 .

Espero que les sirva!

Saludos!

Cuando veo que dice f5 y escribre 5f en los estilos de los botones.

Quede 🤡

//Humor

Actualmente este es el hover que manejan los botones:

<main .main-buttoms button:hover {
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
}
> 

Buenas, habrá notado que al realizar el hover uno de los botones da un pequeño salto, esto viene dado porque crece 2px horizontales al meter el border.

Esta es la que yo creo, es la mejor forma de solucionarlo:

main .main-buttons button {
 ...
  border: 1px solid transparent;
}

Un saludo.

Toda la frustración, los botones seguían uno abajo del otro… no había caso. Probaba como Diego, probaba como acá comentaban… ERA UNA S EL PROBLEMNA.
CLAS EN VEZ DE CLASS… OJO CON ESO!!!

Este es el estilo actualizado que tiene google 2021:

main .main-buttons button:hover{
    border: 1px solid #dadce0;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    color: #202124;   
    background-color: #f8f9fa;    
}

Inspeccionando el código de Google, me he dado cuenta que ha cambiado el estilo a lo siguiente:

main .main-buttons button{
    height: 36px;
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    font-size: 14px;
    border-radius: 4px;
    padding: 0 16px;
    margin: 11px 4px;
    color: #3c4043;
}

main .main-buttons button:hover{
    border: 1px solid #dadce0;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    color: #202124;
    background-color: #f8f9fa;
}
main .main-parrafo {
  width: 530px;
  margin: 0 auto;
}

main .main-parrafo div {
  display: inline-block;
  line-height: 40px;
}

main .main-parrafo p {
  font-size: 16px;
  text-align: center;
}

main .main-parrafo a {
  color: #1a0dab;
  text-decoration: none;
}

main .main-parrafo a:hover {
  text-decoration: underline;
}
/*esto para completar el main de google*/

genial va el clon 😄 !!

Excelente

Si quieren tener el mismo efecto que el de Google en el atributo box-shadow agreguen lo siguiente:

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 

Como pueden ver al momento de escribir el texto queda muy pegado a la lupa entonces tenemos agregarle un poco de padding a la derecha

padding-right:15px;

Al search-icon

Para el movimiento de los botones en mi lugar me sirvió este código para evitar que se mueva a la hora de colocar el :hover. Espero sea de ayuda.

main .main-buttons button {
    height: 3.6rem;
    background-color: #f2f2f2;
    border: none;
    font-size: 1.4rem;
    color: #5f6368;
    border-radius: 0.5rem;
    padding: 0 1.5rem;
    margin: 0 0.5rem ;
    cursor: pointer;
}

main .main-buttons button:hover {
    border: 1px solid #c6c6c6;
    box-shadow: 0 0 1.5px 0 #5f6368;
    margin: 0 0.42rem;
}

Si alguno de ustedes tuvo problemas porque los botones tienen un desplazamiento al realizar el :hover, lo que yo hice fue reducir en 1px el padding del botón:

  main .main-buttons div button:hover {
    border: 1px solid var(--gray-inputs);
    box-shadow: 0 1px 1px var(--gray-inputs);
    padding: 0 14px;    <----- El padding normal es 15px
    cursor:pointer;
  }

Así se compensa el incremento en el tamaño del elemento button

Excelente!!

Estos valores usé para el hover y queda lo más parecido al real.

main .main__buttons button:hover {
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
}

En css hay varias formas de hacer las cosas.
En la linea 104 se utiliza display:inline-block para buscar la alineación de los elementos.

También se podria lograr la alineación con display:flex, pero no desde .main-buttons div sino colocandolo en .main-buttons

Excelente curso y profesor. Definitivamete! ❤️

Porque los videos nos guardan los datos… Me refiero a que cuando retrocedo unos minutos atrás se tiene que empezar de nuevo … No me guarda todo el proceso que ya ya estaba Cargado… Obligado tuve que empezar desde cerot

    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;

Asi quedó mi codigo de los botones, tuve que cambiar las tonalidades de colores de las sombras al hacer hover para que no se vieran tan fuertes. Espero les sirva de referencia para darle estilo a sus botones




/* Botones */

main .BotonesPrincipales
{
    width: 530px;
    margin: 0 auto;
}
main .BotonesPrincipales div
{
    display: inline-block;
}
main .BotonesPrincipales button
{
    height: 36px;
    background-color: #f2f2f2;
    border: none;
    font-size: 14px;
    color: #5f6368;
    border-radius: 5px;
    padding: 0 15px;
    margin-right: 15px;
}

main .BotonesPrincipales button:hover
{
    border: 1px solid #c6c6c6;
    box-shadow: 0px 1px 1px  rgba(0,0,0,0.1;
    color: #222;
    background-color: #f8f8f8;
}

Asi quedó mi codigo de los botones, tuve que cambiar las tonalidades de colores de las sombras al hacer hover para que no se vieran tan fuertes. Espero les sirva de referencia para darle estilo a sus botones

/* Botones */

main .BotonesPrincipales
{
    width: 530px;
    margin: 0 auto;
}
main .BotonesPrincipales div
{
    display: inline-block;
}
main .BotonesPrincipales button
{
    height: 36px;
    background-color: #f2f2f2;
    border: none;
    font-size: 14px;
    color: #5f6368;
    border-radius: 5px;
    padding: 0 15px;
    margin-right: 15px;
}

main .BotonesPrincipales button:hover
{
    border: 1px solid #c6c6c6;
    box-shadow: 0 0 1px 0 #adadad;
    color: #222;
}

Yo tomé el reto de la clase pasada para darle estilo a los botones y lo hice con display flex igual que se hizo con los íconos del header. No encontré diferencia y me parece curioso que acá se haga con inline-block.

Por qué nuestro hover mueve ligeramente los botones y en google no?
Gracias.

Botones y hover reales de Google:

main .main-buttons button {
  height: 3.6rem;
  padding: 0 1.6rem 0 1.6rem;
  border: 0.1rem solid #f8f9fa;
  margin: 0 0.4rem 1.1rem 0.4rem;
  background-color: #f8f9fa;
  border-radius: 0.4rem;
  color: #3c4043;
  font-size: 1.4rem;
  line-height: 2.7rem;
  min-width: 5.4rem;
  text-align: center;
  cursor: pointer;
}

main .main-buttons button:hover {
  box-shadow: 0 0.1rem 0.1rem rgb(0 0 0 / 10%);
  background-color: #f8f9fa;
  border: 0.1rem solid #dadce0;
  color: #202124;
}

Buenas, creo falta un OUTLINE:NONE dentro del estilo de botones para que no nos genere un recuadro de color al seleccionar un botón.

Actualización: en hover de los botones el codigo mas acertado al google actual seria este:

Me gustaría compartir la forma en la que implemente los botones usando etiquetas A:

En HTML:

<div class="buttons">
        <a href="#" class="button_search">Buscar con Google</a>
        <a href="#" class="button_search">Me siento con suerte</a>
</div>

En CSS:

main .button_search{
    padding: 8px 16px;
    background-color: #F4F4F4;
    border: 1px solid #F4F4F4;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    margin-right: 12px;
    color: #6F6F6F;
}

main .button_search:hover{
    border: 1px solid #cfcece;
}

adjunto los estilos de los botones de Google a dia 28 de diciembre de 2020 con los mismo estilos de google

main .main-buttons button {
	height: 36px;
	background-color: #f8f9fa;
	border: 1px solid #f8f9fa;
	cursor: pointer;
	font-size: 14px;
	color: #3c4043;
	border-radius: 4px;
	padding: 0 16px;
	margin-right: 7px;
}

main .main-buttons button:hover {
	border: 1px solid #dadce0;
	color: #202124;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

Estos son los estilos originales de los botones de Google

We’re near the end of the project. Thanks Diego.

Color del borde de los botones: #c6c6c6
Color del box-shadow: #000001
Color de la fuente #222

yo agregué el cursor y se ve genial, acá se los dejo:

main .main-buttons button:hover{
    border: 1px solid #c6c6c6;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    background-color: #f8f8f8;
    color: #222;
    background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
    cursor: pointer;
}

Realmente vale mucho aprender con este compa. Es buenísimo en el desarrollo web.

Nota: si se fijan bien en los botones de búsqueda de Google, al hacer hover también cambiar el cursor por un pointer, así que el estilo en realidad debería quedar:

main .main-buttons button:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-color: #f8f8f8;
    border: 1px solid #c6c6c6;
    color: #222;
    cursor: pointer;
}

Para que me salga el hover igual al de Google mi CSS quedó así 😃 :

main .main-section-buttons button:hover{
    border: 0.1rem solid #c6c6c6;
    box-shadow: 0.05rem 0.05 0.05rem 0.05rem;
    color: #222;
}

Buenisimo

Bastante interesante como se diseñan las paginas ordenadamente

El propio inspector del navegador nos las reglas que se utilizaron, pienso que es importante intentar con nuestros propios conocimientos y después si miramos como se debió hacer.

ESTILO CORRECTO en los botones del proyecto igual a Google

main .main-buttons button:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
  border: 1px solid #c6c6c6;
  background-color: #f8f8f8;
  color: #222;
}

Excelente los tips que dan, yo me imaginaba usar flexbox para alinear los botones pro el inline-block optimiza más el código. Tips que se podrán en práctica.

Porque aqui no se usó de nuevo display flex? hay un problema con usar mucho display flex?

Les recomiendo mucho está herramienta para el color picker
https://picpick.app/en/

Muy detallado al momento de explicar. Hay algunas cosas que vamos olvidando, pero gracias a este curso. Se está afianzando mucho lo aprendido.

Se han reforzado cosas de css pero falta mucho mas estudio.

❤️

Usando la etiqueta button a mi los botones ya se me ponen como inline-block directamente.

Con este curso estoy reforzando muchas cosas de CSS

Dar estilos, es lo mejor!!

Toca seguir estudiando

al footeeeer!!

Así da un aspecto similar para los botones.

Muchas cosas por aprender!!!

0 1px 1px rgba(0,0,0,0.1) este es el valor correcto del box-shadow de Google.

No olviden agregar el cursor: pointer dentro de los buttons, que de esa manera lo hace Google.

main .main-buttons button {
height: 36px;
background-color: #f2f2f2;
border: 0;
font-size: 14px;
color: #5f6368;
border-radius: 5px;
padding: 0 15px;
margin-right: 15px;
cursor: pointer;

El buscador pero no me sale en orden
Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clon</title>
    <link rel="stylesheet" href="CSS/main.css">
</head>
<body>
    <header>
        <nav>
            <ul class="nav-right-section">
                <li>
                    <a href="">Gmail</a>
                </li>
                <li>
                    <a href="">Imágenes</a>
                </li>
                <li class="menu-icon">
                    <a href=""></a>
                </li>
                <li>    
                    <a href=""><img src="https://lh3.googleusercontent.com/ogw/ADGmqu90FEMRMWoR6uQc4U6aVRi-9IjRgmFuU41Mvb24=s32-c-mo" alt="Mi Foto">
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="main-logo">
            <img src="https://img.pngio.com/google-logo-2015-png-image-purepng-free-transparent-cc0-png-google-logo-transparent-10000_3382.png" alt="">
        </section>

        <section    class="main-input">
            <div class="main-input-container">
                <span   class="search-icon">

                </span>
                <input type="text" id="buscar-pal" onkeyup="autocompletado()">
                <a id="demo" class="micro-icon" href=""></a>
            </div>
        </section>

        <section class="main-buttons">
            <div>
                <button>Buscar con Google</button>
            </div>
            <div>
                <button>Me siento con suerte</button>
            </div>
        </section>
    </main>
    <footer>

    </footer>
    <script src="JS/Buscador.js"></script>
    </body>
</html>```

Y el JS



function autocompletado () {
document.getElementById(“demo”).innerHTML = ‘’;

var preguntas = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
];

var pal = document.getElementById("buscar-pal").value;
var tam = pal.length;
for(indice in preguntas){
    var nombre = preguntas[indice];
    var str = nombre.substring(0,tam);
    if(pal.length <= nombre.length && pal.length != 0 && nombre.length != 0){
        if(pal.toLowerCase() == str.toLowerCase()){
            var node = document.createElement("LI");
            var textnode = document.createTextNode(preguntas[indice]);
            node.appendChild(textnode);
            document.getElementById("demo").appendChild(node);
        } else {

}
}
}
}```

muy buena clase