html - 使用 css 编辑按钮的悬停和正常状态(失败尝试)

Question

我一直在努力改变网站末尾联系表格按钮的颜色

我用谷歌浏览器检查过，它说 btn.btn.button-primary

我试着找到 button-primary 并按如下方式编辑它:

/* @primary button theme
-------------------------------------------- */
.smart-forms .btn-primary {  background-color: #18cfab;  }
.smart-forms .btn-primary:hover,
.smart-forms .btn-primary:focus { background-color: #18cfab; }
.smart-forms .btn-primary:active{ background-color: #283033; }
.smart-forms .btn-primary, 
.smart-forms .btn-primary:hover { color: #283033; },
.smart-forms .btn-primary:focus { color: #283033; }, 
.smart-forms .btn-primary:active{ color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.08); }

HTML:

echo '<div class="section">';
echo '<div class="smart-widget sm-left sml-120">';
echo '<label class="field">';
echo '<input type="text" name="captcha" id="captcha" class="gui-input sfcode" maxlength="6" placeholder="Enter CAPTCHA">';
echo '</label>';
echo '<label class="button captcode">';
echo '<img src="' . plugins_url('php/quote/captcha/captcha.php?<?php echo time();?>', __FILE__). '" id="captchax" alt="captcha">';
echo '<span class="refresh-captcha"><i class="fa fa-refresh"></i></span>';
echo '</label>';
echo '</div>'; 
echo '</div>';
echo '<div class="result"></div>';
echo '</div>';
echo '<div class="form-footer">';
echo '<button type="submit" data-btntext-sending="Sending..." class="button btn-primary">Send Message</button>';
echo '<button type="reset" class="button"> Cancel </button>';
echo '</div>';
echo '</form>';
echo '</div>';
echo '</div>';

我希望主颜色为 #18cfab，悬停颜色为 283033。

任何人都可以查明错误和更好的方法来捕获标签并进行相应的编辑

谢谢

Answer 1

这是您的代码，但具有更好的缩进和增强的可读性:

.smart-forms .btn-primary {
  background-color: #18cfab;
}
.smart-forms .btn-primary:hover, .smart-forms .btn-primary:focus {
  background-color: #18cfab;
}
.smart-forms .btn-primary:active {
  background-color: #283033;
}
.smart-forms .btn-primary, .smart-forms .btn-primary:hover {
  color: #283033;
},
.smart-forms .btn-primary:focus {
  color: #283033;
}, 
.smart-forms .btn-primary:active {
  color:       #fff;
  text-shadow: 0 1px rgba(0, 0, 0, 0.08);
}

现在我可以指出很多错误了:

• 在一些 CSS 规则之后有额外的逗号。
• 您已声明 .smart-forms .btn-primary:hover 两次:将颜色设置为 #18cfab 并在下一次声明中设置它到 #283033。在这种情况下，第二个声明将覆盖第一个声明。

修改后的代码如下所示:

.smart-forms .btn-primary {
  color:            #283033;
  background-color: #18cfab;
}
.smart-forms .btn-primary:hover, .smart-forms .btn-primary:focus {
  color:            #fff;
  background-color: #18cfab;
}
.smart-forms .btn-primary:active {
  text-shadow:      0 1px rgba(0, 0, 0, 0.08);
  color:            #fff;
  background-color: #283033;
}