CSS3带有两种颜色的按钮

Question

我想问一下用CSS创建这样的按钮最好的方法是什么：

我尝试使用左右浮动的 div 创建这样的按钮，但是当我缩放时，按钮的右侧会下降。有更好的方法来实现这个吗？ fiddle 链接

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

- kuldarim

---

为什么不直接使用“选择”元素？ - Weafs.py

或者Bootstrap？ - giorgio

Bootstrap 在我的项目中不是一个选项。 - kuldarim

根据我上次检查（很久以前），好像不可能从“select”标签中删除内置的下拉箭头。除非您模仿“select”标签的行为，并添加一个CSS img规则。 - blade19899

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

- Roko C. Buljan

Answer 2

去掉带有text的重复

，并给其他带有text的

添加顶部和底部padding。

您可以使用Font Awesome在下拉菜单中获取插入符号。

.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: 22px 15px 26px 15px; /* add top and bottom border */
  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;
}

i{
  margin-left: 45%;
  margin-top: 45%;
  color: white;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div style="width:270px">
  <div class="button">
    <div>
      <div>text</div>
    </div>
    <div><div><i class="fa fa-caret-down"></i></div></div> <!-- add the caret -->
  </div>
</div>

更新的 jsFiddle

源代码

- Rahul Desai

---

插入符号不是问题。尝试放大或缩小jsfiddle。你会看到问题所在。顺便说一句，感谢建议。 - kuldarim

@kuldarim 你是在说我们在缩放时看到的两个元素之间的间隙吗？顺便说一下，我更新了我的答案并优化了代码。 - Rahul Desai

@kuldarim，我无法使用我的答案中的代码进行复现。您能否请检查一下？ - Rahul Desai

Answer 3

您可以仅使用一个元素与伪元素:before和:after

button {
  border-radius: 4px 0px 0px 4px;
  border-width: 1px;
  border-color: #008f70;
  border-style: solid;
  background-color: #00b48c;
  text-align: right;
  padding: 15px;
  width: 165px;
  position: relative;
  color: white;
}
button:before {
  content: '\25BE';
  position: absolute;
  right: -32px;
  z-index: 1;
  font-size: 16px;
  top: 50%;
  color: white;
  transform: translatey(-50%);
}
button:after {
  content: '';
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-right: 9px;
  background-color: #008f70;
  width: 54px;
  position: absolute;
  top: -1px;
  left: 100%;
  bottom: -1px
}
button:focus {
  outline: 0;
  box-shadow: none;
}

<button>test</button>

- Vitorino fernandes

---

也许你知道为什么光标指针在Firefox中无法显示在按钮的第二部分？更具体地说，在:after按钮部分中不可见。在Chrome中一切正常。你可以在这里找到一个例子：http://jsfiddle.net/e0p161k6/3/。 - kuldarim