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

您的代码确实有效。您所要做的就是调整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; 
}

Answer 2

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

Working JSFiddle here

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

修改：更新小提琴和CSS以匹配更新的问题（使用<a>标记）。

Answer 3

为了解决这个问题，我需要你的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>

它看起来就像你想要的那样。

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

updated fiddle