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

你可以看到它here。

Answer 2

更改显示，因为链接中没有阻止，并根据需要设置宽度。

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

显示here

大绿色按钮

2 个答案: