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

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

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>

Answer 2

我认为使用带有两个<button>标签的<span>标签会更合适。为避免将按钮换行到新行，请使用white-space: nowrap;。要将其居中放置在页面上，只需使用文本对齐（例如在我的示例中）或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>

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

2 个答案: