MailChimp 提交按钮 CSS

Question

社区，

我对 MailChimp 的 "Submit"-Button 的 CSS 样式有疑问。到目前为止，我设法使用 CSS 更改了按钮的颜色和字体。

我想更改提交按钮的填充和边距，但在尝试了不同的 "margin/padding" 组合并在 Google Chrome 的 DevTools 中进行试验后，我找不到解决方案：如果我增加填充，按钮似乎被切断了。

屏幕截图 1 是现在的样子，屏幕截图 2 是如果我将 top/bottom-padding 从 0 像素增加到 20 像素会发生什么。

这是我在我的 Custom-CSS 中用来更改字体、颜色等的内容：

    #mc_embed_signup .button {
    background-color: #d1e5e6  !important;
    color: #000000 !important;
    border-radius: 0 !important;
    border: none !important;
    font: 16px, bebas_neue, Helvetica,Arial,sans-serif !important;
    font-weight: bold !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 13px !important;
    }

这是提交按钮的 HTML：

    <div style="text-align: center !important;"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

我希望有人能帮我解决这个奇怪的问题。我希望所有按钮的大小都相同（为了保持一致性），但我已经在努力为 post 网格更改 "read more" 按钮。希望我至少可以调整提交按钮，使其看起来不会太差。这个太瘦了。

谢谢！

Answer 1

您正在使用 #mc_embed_signup.button 中的重要关键字。 padding-bottom 就是其中之一

#mc_embed_signup .button {
    font-weight: bold !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 13px !important;
}

这就是当您设置 padding-top 和 padding-bottom 时文本被截断的原因。简单地说，不应用 padding-bottom。您可以 git 去掉我强烈推荐的 important 关键字，或者使用具有额外 specificity 规则的 important 关键字。

编辑

去除important关键字后，您可以为您的按钮设置高度，如下所示

#mc_embed_signup .button {
 height: 30px;
}

尝试试验是否需要 !important 关键字。尽量避免

你也可以使用padding-top和-bottom；例如如下。确保使用自动高度。否则，您将需要为填充设置不均匀的值；即顶部为 20，底部为 40

#mc_embed_signup .button {
   padding-top: 17px;
   padding-bottom: 17px;
   height: auto;
}

Answer 2

更新添加 css 为：

#mc_embed_signup .button {
    height: 45px !important;
}

MailChimp 提交按钮 CSS

MailChimp Submit Button CSS

html

css

wordpress

mailchimp

submit-button