CSS 填充/边距未按预期工作

Question

我想要一个类似这样的按钮：

但这是我的：

这是 CSS：

.cubutton {
border-radius: 99999px; /* Round button corners here with border-radius */
    background-color: #44ace8;
color: #fff;
cursor: pointer;
    font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-size: 2.0rem; 
font-weight: 700;
letter-spacing: 1px;
padding: 20px 40px 20px 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); /* Adds drop shadow to button. */
-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
    -webkit-transition: all 0.1s ease-in-out;
-moz-transition:    all 0.1s ease-in-out;
-ms-transition:     all 0.1s ease-in-out;
-o-transition:      all 0.1s ease-in-out;
transition:         all 0.1s ease-in-out; 
}

对于我的生活，我无法弄清楚为什么填充和边距不显示。我无论如何都不是编码专家，所以我很容易忽略一些明显的东西。

这是html：

<a data-sumome-listbuilder-id="11553d26-bca5-4975-91e8-e5fdf2937bf8"
 class="cubutton" data-sumome-trigger="true" 
 href="javascript:void(0);">Take this post with you. Get the PDF version. 100% free. Click here.</a>

Answer 1

您需要在元素上设置宽度（假设它是块级元素），否则它将始终跨越其父元素的宽度。为了避免填充调整整体宽度，您需要明确设置box-sizing。

Working JSFiddle here.

.cubutton {
  display: block;
  box-sizing: border-box;
  padding: 60px 100px;
  text-align: center;
  text-decoration: none;
  width: 50%;
}

编辑：更新了 Fiddle 和 CSS 以匹配更新后的问题（使用 <a> 标记）。

Answer 2

为了解决问题，我需要你的 html，因为问题就在那里。

您无法获得相同的外观，因为您将锚点用作按钮，并且它不允许您进行换行或更改宽度。因此，简而言之，您必须使用大量文本才能将锚点用作按钮。

This pen 使其工作，但只有两个字。

这是一个updated fiddle，我只是将标记更改为：

<button data-sumome-listbuilder-id="11553d26-bca5-4975-91e8-e5fdf2937bf8" class="cubutton" data-sumome-trigger="true" href="javascript:void(0);">
Take this post with you. <br/> Get the PDF version.<br/> 100% free. Click here.</button>

它看起来正是你想要的样子。

---

编辑： 正如将指出的那样，如果向其添加“显示：块”，您实际上可以将其保留为锚点。但是，在这种情况下，您还需要给它一个宽度并使文本居中对齐。

updated fiddle

Answer 3

您的代码确实有效。您所要做的就是调整 div 的背景颜色和高度：

Working fiddle

.cubutton {
border-radius: 99999px; /* Round button corners here with border-radius */
    background-color: #83d55c;
    min-height: 90px;
color: #fff;
cursor: pointer;
    font-family: 'Quicksand', sans-serif;
font-size: 98px;
font-weight: 700;
letter-spacing: 1px;
padding: 20px 40px 20px 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); /* Adds drop shadow to button. */
-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
    -webkit-transition: all 0.1s ease-in-out;
-moz-transition:    all 0.1s ease-in-out;
-ms-transition:     all 0.1s ease-in-out;
-o-transition:      all 0.1s ease-in-out;
transition:         all 0.1s ease-in-out; 
}