编号按钮 - 不同样式的编号和标题

Question

我正在尝试制作这样的按钮：

.

一个按钮被“分成”两部分 - 一个数字和一个标题。

两个部分有不同的背景颜色，字体颜色，文字在相应的背景中居中。悬停时，它的大小会增加。

那张图片是下面代码的真实结果。但是，有一些问题我似乎无法解决。

1) 我想让它像单个元素一样工作，但到目前为止，我只能通过为按钮的每个部分创建两个不同的 div 来实现这一点。有没有更优雅的方式来达到同样的效果？

2) 当我缩小浏览器窗口时，我得到如下内容：

.

我不希望它像那样分裂。此外，我似乎无法将其保持在页面中心。如果你注意到的话，它有点偏向右侧......

我该如何解决这些问题？

代码如下：

        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>

Answer 1

我认为使用带有两个<span>-tag 的<button>-tag 会更合适。为避免按钮换行，请使用white-space: nowrap;。要将其居中在您的页面上，只需使用 text-align，就像在我的示例中一样，或 many other methods 之一。取决于父元素的上下文。如果它在页面上水平和垂直居中，我宁愿使用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>

Answer 2

使用一个元素并依赖伪元素作为数字：

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>