Estilos en los botones

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 “a” 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’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);

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=“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

}**

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