CODEWITHSUNDEEP
htmlcss
DevMaker
DevMaker

Reputation: 17

Is it possible to have button text in two lines with different fonts using HTML and CSS?

Using the attribute value in HTML, I can't make button text work in two lines as well as different font sizes

I have already tried whitespace in css but it's more like word wrap and that does not solve my problem. I also tried using ampersand-hash13; and ampersand-hash10; but it doesn't work as well.

@media (min-height: 280px) {
.divNumKeypad {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
.numberBtn{
    font-size: 30px;
    height: 68px;
}
<div class="col-xs-4 ">
    <input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />
</div>

I expect to have a button with two lines of text. "HI" should be on the first line with bigger font and the bottom text "HELLO" should be smaller than the text on the top.

Upvotes: 0

Views: 1834

Answers (3)

Manish Maharjan
Manish Maharjan

Reputation: 34

Try this. 

 label{
        max-width: 150px;
        font-size: 18px;
        display: block;
        padding:10px 20px;
        border:1px solid black;
        cursor: pointer;
    }
    label span{
        display: block;
        font-size: 14px;
    }
    label input{
        background:none;
        border:none;
    }
   input[value]{
       font-size: 0;
       display: none;
   }
<div class="col-xs-4 ">
        <label> <input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />HI<span> HELLO</span></label>
</div>

Upvotes: 0

Kosh
Kosh

Reputation: 18434

Consider using button instead of input:

button {
  font-size: 30px;
}
<button>HI<br><small>HELLO</small></button>

Upvotes: 1

Ngorld
Ngorld

Reputation: 856

Try this below

@media (min-height: 280px) {
  .line-1,  {
    display:block;
    font-size: 20px
  }

  .line-2 {
    display: block;
    font-size: 10px;
  }
}
<div class="col-xs-4 ">
  <button>
    <span class="line-1">HI</span>
    <span class="line-2">HELLO</span>
  </button>
</div>

Upvotes: 1

Related Questions