如何删除按钮的默认样式

Question

我创建了一个按钮并添加了 CSS，但结果不是预期的结果。

这是我的 HTML 代码

.button{
  /* centre the button  */
  margin: 0;
  position: absolute;
  top: 70%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* adding colour and style */
  background-color: #008CBA; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  /* text-decoration: none; */
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

<div class = button>
   <button type="submit" class="registerbtn">Continue</button>
</div>


    

有没有办法解决这个问题？

Answer 1

您可以通过将按钮元素而不是另一个元素的按钮类设置为以下代码来实现此目的

button{
  /* centre the button  */
  margin: 0;
  position: absolute;
  top: 70%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* adding colour and style */
    background-color: #008CBA; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    /* text-decoration: none; */
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
  }

或者，如果您坚持使用另一个我不推荐的容器 div，您可以删除按钮元素属性。

如果是这种情况，您可以将以下代码添加到您的 CSS

button{
    background: transparent;
    border: none;
}
button:focus{
    outline: none;
    border: none;
}

Answer 2

只需根据需要向按钮元素和样式添加一个类即可。

.btn {
  border: 2px solid green;
  border-radius: 1rem;
  background: lightgreen;
  color: darkgreen;
  font-family: sans-serif;
  font-weight: bold;
  padding: .5rem;
  cursor: pointer;
}

.btn:hover {
  background: darkgreen;
  color: lightgreen;
}

<button class="btn">My Button</button>

Answer 3

试试这个：

.button button {
  margin: 0;
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 300ms;
}

button:hover {
  background: #007095;
}

<div class = button>
  <button type="submit" class="registerbtn">Continue</button>
</div>