html - 大きな緑のボタン

Question

次のような2行のテキストで大きなボタンを作成しようとしています:

私が欲しいもの

これは、私が「達成」したことを示す現在のJSFiddleです。

私はasp.netとプログラミング全般にかなり慣れていないので、貧弱なCSSを許してください。

誰でも提供できるヘルプをありがとう。

HTML:

<div class="bigGreenButton"> <a href="/Liquor/specialorder/supplier-info">Submit a special order request <br />
for information ➧
</a> </div>

CSS:

.bigGreenButton a{
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
background-color:#60a74a;
color:white;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
padding-left:25px;
padding-right:25px;
text-transform:uppercase;
text-decoration:none;
height:auto;
width:auto;
text-align:center;
}

.bigGreenButton a:hover {
 background-color:#cccccc;
}

button {
text-align: center;
padding: 0px 0px 0px 0px;
border: none;
}

Answer 1

リンク内にブロックがないため、表示を変更し、必要な幅を設定します。

.bigGreenButton a{
    ...
    display: block;
    width: 400px;
}

ここに表示

Answer 2

これを css に追加します。

.bigGreenButton a{
    display: inline-block;
    ...
}

ここで見ることができます。