In your CSS you are using the button selector. That means it will apply that style to any <button> element in the HTML. The way CSS works is that the most recently stated rule overwrites the previous ones. So it makes sense that only

button {
    display: inline-block;
    background-color: e6e6e6;
    padding: 12px;
    width: 330px;
    height: 50px;
}

Is showing up, what you want to do is give each button an id or a class

With <button id="signInButton">
You can use the CSS selector for that ID and it will apply those styles only to that button, so

#signInButton {
    display: inline-block;
    background-color: e6e6e6;
    padding: 12px;
    width: 330px;
    height: 50px;
}

Would only apply to the button with that ID

I would recommend checking out an HTML and a CSS tutorial from W3schools, they teach you the fundamentals and they helped me a lot.

here’s a working snippet but accept the previous answer as @Da Mahdi03 clearly showed then way

  button {
  display: block;
  background-color: #e6e6e6;
  padding: 12px;
  width: 330px;
  height: 50px;
  background-image: url("IMG_0045.jpg");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 25%;
  margin-top:16px;
}

a {
  text-decoration: none;
  color: white;
}

#google{
background:blue;}

#signin{
background:red;}

<button  id='google' type="button"><a href="https://accounts.google.com/ServiceLogin/signinchooser?hl=en&passive=true&continue=https%3A%2F%2Fwww.google.com%2F%3Fclient%3Dsafari%26channel%3Dipad_bm&ec=GAZAAQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin"><strong>Sign in with Google</strong></a></button>

<button id='signin' type="button" class="submit">Sign In</button>

I’m really new to coding, and as a result, I’m having a bit of difficulty solving a problem that I have encountered. I am currently attempting to create a login page for practice, but when both the “Sign in to Google” and the “Sign in” button retain the same appearance no matter what I try to do. They work just fine, it is just the appearance that’s the issue. The “Sign in button will always emulate the appearance of the “Sign into Google button, no matter what changes I make to it. Any help would be appreciated.

 
    
   
    
    
     <button type="button"><a href="https://accounts.google.com/ServiceLogin/signinchooser?hl=en&passive=true&continue=https%3A%2F%2Fwww.google.com%2F%3Fclient%3Dsafari%26channel%3Dipad_bm&ec=GAZAAQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin"><strong></strong>Sign in with Google</button></a><br><br>
    
    <style>
      button {
        display: inline-block;
        background-color: #e6e6e6;
        padding: 12px;
        width: 330px;
        background-image: url("IMG_0045.jpg");
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 25%;
        }

      a {text-decoration: none; color:black;

      }
    </style>
    

      
    

       
    
  <button type="button" class="submit">Sign In</button>
    
      
    <style>
button {
  display: inline-block;
  background-color: e6e6e6;
  padding: 12px;
  width: 330px;
  height: 50px;
  
</style>