Question

`嗨，我想制作一个包含两行文本的按钮，并让它们使用不同的字体大小...有什么办法吗？我当前的方式是使用一种设计好的按钮来尝试。可以以某种方式工作吗？任何帮助表示赞赏！在您看到我正在使用的东西下面...我想在“ START”下有第二行，该行以较小的字体显示

<a class="smallbtn">START</a>

.smallbtn {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;

}

Answer 1

如果您只想在“ START”下添加新的一行文本，则可以这样做

<a class="smallbtn">START<br><sub>hello</sub></a>

或

p{
font-size:12px;
padding:0px;margin:0px;}

<a class="smallbtn">START<br><p>hello</p></a>

Answer 2

您可以尝试在按钮内插入div，为元素提供一个ID并添加CSS，如下所示：

<a class="smallbtn">START<div id="smallbtnFont">hello</div></a>

#smalbtnFont{
  font-family: "arial";
  font-size: 1em;
}

Answer 3

好问题，这是怎么做：

button {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}

<button>Start<br><small style="font-size:50%;">Now</small></button>

两行带有不同字体大小的按钮？

3 个答案: