No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
17H
23M
59S

Estilos en los botones

14/18
Recursos

隆Esta es la 煤ltima secci贸n de nuestro main! Vamos a generar nuestros estilos para que no se note la diferencia entre los nuestros y los de Google.

C贸mo aplicar los estilos de los botones

  1. Llamamos la clase que contiene los botones dentro de la etiqueta main.
  2. Ajustamos el width: 530px.
  3. Ajustamos el margin: 0 auto para que se posicione siempre en el centro.
14.1.png

Definir la posici贸n de los botones

  1. Llamamos la clase que contiene los botones que contenga una etiqueta div con main .main-buttons div.
  2. Ajustamos el display en inline-block. Esto es porque por defecto el navegador le asigna a las cajas display: block, lo que hace que est茅 una encima de otra. Al usar inline-block las ponemos una a lado de otra. Por esto le asignamos la misma propiedad a las dos cajas.
14.2.png

Pasos para darle dise帽o de caja a los botones

  1. Llamamos la clase que contiene los botones que contenga la etiqueta button con main .main-buttons button.
  2. Le damos una altura con height: 36px.
  3. Ajustamos el color de fondo con background-color: #f2f2f2.
  4. Cambiamos el borde para que no se desplaze al colocar el cursor encima con border: 1px solid #f2f2f2.
  5. Cambiamos el tama帽o de fuente con font-size: 14px.
  6. Cambiamos el color de la fuente con color: #5f6368.
  7. Redondeamos los bordes con border-radius: 5px.
  8. A帽adimos espacio interno a los lados con padding: 0 15px.
  9. A帽adimos una separaci贸n entre los botones con margin-right: 15px.
14.3.png

C贸mo poner el efecto hover en los botones

Ahora necesitamos que al pasar el cursor sobre los botones, cambie el color del texto y se cree una sombra alrededor de la caja. Para ello:

  1. Llamamos la clase que contiene los botones con el pseudo-elemento hover. As铆: main .main-buttons button:hover.
  2. Generamos un borde s贸lido con border: 1px solid #c6c6c6.
  3. Generamos una sombra con box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1).
  4. Cambiamos el color del texto con color: #222.
  5. A帽adimos un color de fondo con background-color: #f8f8f8.
  6. Agregamos cursor: pointer para que el 铆cono del cursor cambie a una manita al posicionarlo sobre los botones.
14.4.png

En nuestro navegador deber铆amos tener un resultado como este:
image.png

Contribuci贸n creada con aportes de: Juan Alberto L贸pez L贸pez, Wandy Rafael Santana Evangelista y Jos茅 Miguel Veintimilla.

Aportes 148

Preguntas 29

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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.

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; }

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);

Para el shadow de los botones, el color que realmente se usa es este: rgba(0,0,0,0.1); 驴Pero qu茅 significa? RGB es pr谩cticamente un c贸digo de colores (Red, Green, Blue) que va del 0 al 255 por cada color, la mezcla de estos hace que puedas generar varias paletas de colores, al poner en 0 est谩s indicando que todos van a ser negros, por tanto, el resultado final ser谩 negro, la 鈥渁鈥 en este caso indica transparecia u opacidad, y en este caso se le est谩 poniendo un 0.1 de opacidad, (Lo que equivaldr铆a al 10%) de opacidad ^^

C贸digo para interacci贸n de bot贸n Me siento con suerte: I鈥檓 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);

Hay que personalizar un poco 馃槂

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

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>

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);馃敟馃敟馃敟

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?

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;
}

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 馃槂

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=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥>
<link href=鈥https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap鈥 rel=鈥渟tylesheet鈥>

CSS rules to specify families:
font-family: 鈥楻oboto鈥, 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

}**

Cordial Saludo.
Les comparto la primera imagen es el ejemplo, al clon le cambi茅 el doodle.
Que tengan un buen d铆a.

Para hacer que los botones cuando est谩n en estado hover no muevan los elementos a su alrededor, no hay que quitarles el borde solo tenemos que quitar el color de este.

AS脥:

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

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

Actualmente la p谩gina de google tiene un texto adicional debajo de los botones que indica el pa铆s donde uno se encuentre.

hola

Hola gente!! Tengo una duda鈥 en mi c贸digo, hice una secci贸n con ambos botones sin div. (Hice el c贸digo antes de ver las clases" y resulta que no funcionan como tal al clickearlos. Es porque no los separ茅 con div? . Paso mi c贸digo , a ver si una mente brillante me ayuda con mi problema鈥 desde ya millones de gracias!!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Clone Google</title>
        <link rel="stylesheet" href="./css/estilos.css">
    </head>
    <body class="conteiner">
        <header>
            <nav>
                <ul class="nav">
                    <a class="nav-li" href="https://mail.google.com/mail/?tab=rm&amp;ogbl">Gmail</a>
                    <a class="nav-li" href="https://www.google.com.ar/imghp?hl=es-419&amp;tab=ri&amp;ogbl">Im谩genes</a>
                    <svg class="nav-li"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>
                    <img class="nav-li" src="https://lh3.googleusercontent.com/ogw/AAEL6shXeE9DKRcF5Lpfk8wFxXm8Z_RGV47D5b_oODn7=s32-c-mo"  alt="" aria-hidden="true" data-noaft="">
                </ul>
            </nav>
        </header>
        <main>
            <Section class="logo">
                <img src="./Imagenes/logoGoogle5.png" alt="logo Google">
            </Section>
            <section class="main-input">
                  <div class="main-input-container">
                        <span class="search-icon">
                        </span>
                            <input type="text">
                        <a class="micro-icon" title="Buscar por voz" href=""></a>
                </div>
            </section>
            <section>
                <button class="boton">Buscar con Google</button>
                <button class="boton">I'm feeling Lucky</button>
            </section>
          
        </main>
        <footer class="pie">
            <section class="pie-alineado">
                <section class="izquierda">
                    <li class="izq-li">Publicidad</li>
                    <li class="izq-li">Negocios</li>
                    <li class="izq-li">Acerca de</li>
                    <li class="izq-li" >C贸mo funciona la b煤squeda</li>
                </section>
                <section class="derecha">
                    <li class="der-li" >Privacidad</li>
                    <li class="der-li" >Condiciones</li>
                    <li class="der-li">Preferencias</li>
                </section>
            </section>
        </footer>
    </body>
</html>

驴C贸mo me qued贸? 驴Se ve bien?

En mi caso, agrege una transicion a los botones para que no se vea un cambio tan brusco en los colores, en el button, aplique un

main .main-buttons button {
	transition: .2s ease-in;
}

Y en el hover

main .main-buttons button:hover {
	transition: .2s ease-in-out;
}

en la parte del button:hover, podemos incluir ** linear gradient** para darle una trasnicion de color y se vea mas parecido

<code> 
 background: linear-gradient(#bab7b7,  #f8f8f8);

todo va bien lo unico que puedo notar es que a mis botones no le cambia el color de las letras si pueden ayudarme por favor

Ponganle en el hover de los botones esta propiedad:

background: linear-gradient(#c6c6c6, #f2f2f2);

No estoy seguro de si esos son los colores exactos, pero asi muestra cuando nos paramos en el boton, arriba el primer color, y se va degradando hacia abajo y muestra el segundo, a mi parecer cuando el profesor deja activado en el inspector de elementos el :hover, se aprecia que el background del hover es un linear-gradient.

si le dan inspeccionar y se van a hover, ahi les dar谩 los codigos de colores y sombras que usa el google, si ya lo entiendes solo copias y pegas

TEST PARA EVALUAR LA NECESIDAD DE APLICAR HOVER

Paso a paso de la clase:

  • Paso 1

  • Paso 2

  • Paso 3

  • Paso 4

  • Paso 5

  • Paso 6

  • Paso 7

  • Paso 8

  • Paso 9

  • Paso 10

  • Paso 11

  • Paso 12

  • Paso 13

Explicaci贸n del ligero desplazamiento lateral al realizar HOVER a los botones

_

  • En realidad se genera ese desplazamiento del bot贸n porque el profe estableci贸 un padding lateral para darle tama帽o a los botones, entonces al realizar un hover el cual implica agregar un borde de 1px, el padding permanece intacto y el valor del content (parte azul en el boxmodel), al ser valor de origen, tambi茅n permanece intacto. Por lo que se ese borde del hover es 1px adicional a su tama帽o original, originando el desplazamiento.
    Veamos el box model:
    SIN HOVER:

    CON HOVER

  • Por el contrario, si en lugar de utilizar padding, establecemos el tama帽o de los botones utilizando width:

width: 12.3rem (para el primer bot贸n)
width: 14.2rem (para el segundo bot贸n)

al realizar el hover, el 1px adicional por el borde le restar谩 al tama帽o del contenido del bot贸n (parte azul en el inspector del c贸digo) por lo que no existir谩 desplazamiento:

Ejemplo con bot贸n de width=14.2 rem

SIN HOVER:

CON HOVER:

Notemos como la parte azul disminuye 2 px (1 px por lado) para darle espacio al borde al realizar el HOVER, por lo que no existe una impresi贸n visual de desplazamiento.

Me sirvi贸 para centrar el input container:

main .main-input-container {
  margin-left: -5%;
}

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;
}

Estos son los estilos originales de los botones de Google

We鈥檙e 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;
}