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

将此添加到您的CSS：

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

你可以在这里看到它。

Answer 2

更改显示，因为您的链接内没有块并设置您想要的宽度。

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

显示在这里