Number section on button - html

Question

I'm trying to create a button that looks like this:
The tricky part is getting the number to 'fit' inside of the button. This is how I have my button set up:
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
This is my 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 the height and width of the number seems unnecessary, and I can't get the number to line up properly unless I get into extremely specific positioning which is not ideal. Where am I going wrong here?
Plunk:
http://plnkr.co/edit/0WUs3Y2axmOvfB7TswCb?p=preview

Answer 1

Try to this Define your .textclass position:relative;overflow:hidden; and .numberclass line-height:30px; as like this
/* 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 you just define button into span tag as like 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>

Answer 2

Just give position: relative; to .textclass and line-height: 30px; to .numberclass
Updated Plunker

Answer 3

try this (replace it)
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 9px;
top: 8px;
height: 20px;
padding-top: 9px;
width: 30px;
border-radius: 2px 0 0 2px;
}

Answer 4

you can try this one:
.textclass {
width: 140px;
position:relative;
overflow:hidden;
height: 40px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 15px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 30px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:40px;
width: 40px;
line-height:35px;
border-radius: 2px 0 0 2px;
}
DEMO HERE

Answer 5

Please, see the working plunker with completely auto adjusting height of the number part. You do not even need to apply the line-height.
HTML
<button type="text" class="textclass">
<span class="numberclass">
<span class="container"><span class="inner">33</span></span>
</span>
Text
</button>
CSS
.textclass {
width: 90px;
height: 30px;
position: relative;
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;
bottom: 0;
width: 30px;
border-radius: 2px 0 0 2px;
display: block;
}
.container {
display: table;
height: 100%;
text-align: center;
width: 100%;
}
.inner {
display: table-cell;
height: 100%;
vertical-align: middle;
}

Answer 6

change in .numberclass class
/* Styles go here */
.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;
border-radius: 1px 0 0 1px;
color: #fff;
left: 8px;
padding: 8px;
position: absolute;
top: 9px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
</body>
</html>