html - Number section on button -
i'm trying create button looks this:
the tricky part getting number 'fit' inside of button. how have button set up:
<button type="text" class="textclass"><span class="numberclass">33</span>text</button> this css:
.textclass { width: 90px; height: 30px; background-color: #fff; border: 1px solid blue; color: blue; font-size: 10px; line-height: 12px; font-weight: 600; text-transform: uppercase; border-radius: 2px; padding-left: 20px; } .numberclass { background-color: blue; color: #fff; position: absolute; left: 0; top: 0; height:30px; width: 30px; border-radius: 2px 0 0 2px; } setting height , width of number seems unnecessary, , can't number line unless extremely specific positioning not ideal. going wrong here?
plunk:
try define .textclass position:relative;overflow:hidden; , .numberclass line-height:30px;
/* styles go here */ .textclass { width: 90px; position:relative; overflow:hidden; height: 30px; background-color: #fff; border: 1px solid blue; color: blue; font-size: 10px; line-height: 12px; font-weight: 600; text-transform: uppercase; border-radius: 2px; padding-left: 20px; } .numberclass { background-color: blue; color: #fff; position: absolute; left: 0; top: 0; height:30px; width: 30px; line-height:30px; border-radius: 2px 0 0 2px; }<div> <button type="text" class="textclass"><span class="numberclass">33</span>text</button> </div>or define button span tag this
.textclass { width: 90px; position:relative; overflow:hidden; display:inline-block;vertical-align:top;text-align:center; height: 30px; background-color: #fff; border: 1px solid blue; color: blue; font-size: 10px; line-height: 30px; font-weight: 600; text-transform: uppercase; border-radius: 2px; padding-left: 20px; } .numberclass { background-color: blue; color: #fff; position: absolute; left: 0; top: 0; height:30px; width: 30px; line-height:30px; border-radius: 2px 0 0 2px; }<div> <span class="textclass"><span class="numberclass">33</span>text</span></div>
Comments
Post a Comment