有没有办法使按钮看起来彼此不同?

Question

我对编码真的很陌生，因此，我在解决遇到的问题时遇到了一点困难。我目前正试图创建一个登录页面的做法，但当两者的"登录到谷歌"one_answers"登录"按钮保留相同的外观，无论我尝试做什么。它们工作得很好，只是外观有问题。"登录"按钮总是模仿"登录谷歌"按钮的外观，无论我对它做了什么改变。如有任何帮助，不胜感激。

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

Answer 1

在你的CSS中，你正在使用button选择器。这意味着它将对HTML中的任何<button>元素应用该样式。CSS的工作方式是最近声明的规则覆盖之前的规则。所以只有

才有意义

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

显示，你要做的是给每个按钮一个id或class

与<button id="signInButton">

你可以为这个ID使用CSS选择器它只会将这些样式应用到那个按钮上，所以

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

只适用于ID为

的按钮我建议你看一下W3schools的HTML和CSS教程，他们教你基础知识，对我帮助很大。

Answer 2

这是一个工作片段，但接受之前的答案，因为@Da Mahdi03清楚地显示了他们的方式

  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>