html - 具有两种颜色的 CSS3 按钮

Question

我想问一下用 css 创建这样的按钮的最佳方法是什么:

我试图用左右浮动的 div 创建这样的按钮，但是当我放大和缩小时，按钮的右侧会下降。有没有更好的方法来实现这一点？

fiddle link

<div style="width:270px">
    <div class="button">
        <div>
            <div>text</div>
            <div>text</div>
        </div>
        <div><div></div></div>
    </div>
</div>

.button {
    height: 80px;
    cursor: pointer;
}

.button:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.button > div:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid #008f70;
    background-color: #00b48c;
    text-align: right;
    float: left;
    padding: 15px;
    width: 165px;
}

.button > div:first-child > div:first-child {
    color: #b8e3d6;
    font-size: 12pt;
}

.button > div:first-child > div:last-child {
    color: #fff;
    font-weight: bold;
    font-size: 20pt;
}

.button > div:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    float: right;
    margin-right: 9px;
    background-color: #008f70;
    width: 64px;
    height: 81px;
    position: relative;
}

Answer 1

只需要:

button.styled{
  color:#fff;
  background:#00B48C;     /* CHANGE ONLY THIS ONE AND SEE IT HAPPEN ;) */
  padding:10px 45px 10px 15px;
  border-radius:4px;
  /* Do not edit below */
  border:0;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
}
button.styled:after{
  background: rgba(0,0,0,0.2);
  padding:11px;
  content:'\25be'; /* \25bc \25be */
  /* Do not edit below */
  position:absolute;
  right:0;
  top:0;
}

<button class="styled">Hello World</button>

有关更多 UTF-8 字符，请参阅:https://stackoverflow.com/a/25986009/383904