CSSのパディング/マージンは、私がこれに似たボタンたい

Question

期待どおりに動作しません：

をしかし、これは私のものです：

.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; 
} 

：

ここ

は、CSSです

私の人生にとって、私はouを理解できませんなぜパディングと余白が表示されないのですか？私はコーディングの専門家ではないので、明らかに何かを見落とすことは容易です。

<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

あなたのコードが実際に動作します：

は、ここでのhtmlです。それ以外の場合は、

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

あなたは要素の幅を設定する必要があります（仮定、それはブロックレベル要素があります）：あなたがしなければならないすべてはあなたのdivの背景色や高さを調整することですそれは常に親の幅に広がります。パディングで全体の幅を調整しないようにするには、box-sizingを明示的に設定する必要があります。

Working JSFiddle here。

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

編集：は（<a>タグを使用して）更新質問を一致させるためにフィドルやCSSを更新しました。

Answer 3

問題を解決するには、問題が存在するので、私はあなたのhtmlが必要でした。

アンカーをボタンとして使用しているため、改行や幅の変更ができないため、同じ外観を得ることはできません。要するに、アンカーをボタンとして使用するにはテキストをたくさん書かなければなりません。

This penは2単語のみで動作します。

<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です。

---

EDIT：それに： 意志が「ブロック表示」を追加する場合は、実際のアンカーとしてそれを維持することができます指摘したように。 Tho、その場合は、幅を与えてテキストを中央に配置する必要があります。

updated fiddle