Numbered Button - number and title with different styles

Question

I am trying to make a button like this:

.

A single button that is "divided" into two parts - a number, and a title.

Both parts have different background colors, font colors, and the text is centered in the corresponding background. When hovered, it increases in size.

That picture is the real result of the code below. However, there are a few problems I cannot seem to solve.

1) I would like to have it work like a single element, but so far, I was only able to achieve this by creating two different divs, for each section of the button. Is there a more elegant way to achieve the same result?

2) When I scale down the browser window, I get something like this:

.

I don't want it to get split like that. Also, I cannot seem to keep it centered in the page. If you notice, it is a bit to the right side...

How can I solve those problems?

Here's the code:

        body {
            background-color: #0091c0;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        
        .btn {
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
        }
        
        #btn42 {
            width: 50%;
            margin: auto;
        }
            
        #btn42:hover {
            transform: scale(1.05);
        }
        
        #btnNumber {
            text-align: center;
            width: 40px;
            background: #e2e1e1;
            color: #696969;
        }
        
        #btnTitle {
            width: 300px;
            text-align: center;
            background: white;
            color: #085388;
        }

    <div id="btn42">
        <div class="btn" id="btnNumber">42</div>
        <div class="btn" id="btnTitle">Some Random Title</div>
    </div>

score 2 · Accepted Answer · answered Dec 29 '18 at 15:31

Use one element and rely on pseudo element for the number:

body {
  background-color: #0091c0;
  font-family: Arial, Helvetica, sans-serif;
}

.btn:hover {
  transform: scale(1.05) translateX(20px);
}

.btn {
  width: 300px;
  margin: auto;
  transform:translateX(20px); /*fix centring due to pseudo element*/
  text-align: center;
  background: white;
  color: #085388;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
  position:relative;
}

.btn::before {
  content: attr(data-nb);
  position:absolute;
  top:0;
  right:100%;
  width: 40px;
  background: #e2e1e1;
  color: #696969;
  box-shadow:
     3px 0 #fff, /*fix shadow overlap*/
     3px 3px rgba(0, 0, 0, 0.3);
}

<div class="btn" data-nb="42">Some Random Title</div>

Thanks for the help! This is exactly the result I was looking for. I just had to add one more pixel to the box shadow of the number, since I it was still slightly visible, when hovered. I didn't know anything about pseudo elements... I still have a lot to learn. Thanks! — MikeMichaels, Dec 29 '18 at 15:47

Daniel Sixl · Answer 2 · 2018-12-29T19:57:42.587

I think using a <button>-tag with two <span>-tags inside would be more appropriate. To avoid the button wrapping to a new line use white-space: nowrap;. To center it on your page simply use text-align, like in my example, or one of the many other methods. Depends on the context of the parent element. If it is centered horizontally and vertically on the page I would rather use flexbox.

body {
    background-color: #0091c0;
    font-family: Arial, Helvetica, sans-serif;
}

main {
  text-align: center;
}

.btn {
  border: none;
  background: #fff;
  line-height: 24px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
  transition: transform 200ms ease-in-out;
}

.btn span {
  background: #fff;
  display: inline-block;
  margin: 0;
  padding: 0.2em 0.5em 0.2em;
}

.btn span:first-of-type {
  background-color: #ccc;
  color: #696969;
}

.btn:hover {
    transform: scale(1.03);
}

<main>
  <button class="btn"><span>42</span> <span>Some Random Title</span></button>
</main>

Numbered Button - number and title with different styles

2 Answers2