Question

我在编码方面完全是新手，所以这可能是一个简单的错误，但请帮助我:)

我用 css 制作了一个按钮，我希望它的颜色是主色，但它不起作用。该按钮根本不会改变颜色。此外，它不会在悬停时更改颜色，并且边框半径也不起作用。

代码如下：

.btn {
  padding: 18px 24px 18px 24px;
  font-size: 18px;
  background-color: $color-main;
  color: #000000;
  font-family: sans-serif;
  border-radius: 30px;
}

.btn:hover {
  background-color: darken($color-main, 3%);
  color: #000000;
}

整个部分的html：

<section class="splash">
  <div class="page-intro">
    <h1 class="main-title">Witaj na mojej stronie!</h1>
    <h2 class="main-subtitle">Test</h2>
    <a class="btn btn-solid" href="#about">o mnie</a>
  </div>
</section>

希望大家帮忙:))

Answer 1

在您要使用的颜色旁边添加 !important 可以解决您的问题。就像这样：

.btn{
background-color:red !important;
    }

Answer 2

用变暗检查这个JsFiddle

$blue: #1e90ff; 
.btn  {   padding: 18px 24px 18px 24px;   
          font-size: 18px;  
          background-color: $blue;   
          color: #000000;   
          font-family: sans-serif; 
          border-radius: 30px; 
      }
 .btn:hover  {
 background-color: darken($blue,12);        
 color:#ffffff; 
}

Answer 3

如果你是初学者，SCSS 或 SASS 的使用方式与 CSS 不同，如果你只使用 html 和 css，只需将 darken (...) 替换为更深的颜色。如果你使用 SASS / SCSS，代码对我来说很好

Answer 4

我是这样试的。它有效。

.btn {
  padding: 18px 24px 18px 24px;
  font-size: 18px;
  background-color: $color-main;
  color: #000000;
  font-family: sans-serif;
  border-radius: 30px;
  outline: none;
  border: 3px solid black;
}

.btn:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}

html

<button class="btn">click me</button>

按钮不会改变背景颜色，也不会悬停

4 个答案: