CODEWITHSUNDEEP
htmlcss
developthewebz
developthewebz

Reputation: 1947

Number section on button

I'm trying to create a button that looks like this:

enter image description here

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

Upvotes: 0

Views: 48

Answers (6)

Kishan
Kishan

Reputation: 1190

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>

Upvotes: 0

Anton
Anton

Reputation: 2646

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

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

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

Upvotes: 0

sms247
sms247

Reputation: 4504

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

Upvotes: 0

ketan
ketan

Reputation: 19341

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

Updated Plunker

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

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>

Upvotes: 1

Related Questions