Html CSS3双色按钮

我想问，使用css创建此类按钮的最佳方法是什么：

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

文本
文本
.按钮{
高度：80px；
光标：指针；
}
.按钮：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
.button>div：第一个孩子{
边框左上半径：4px；
边框左下半径：4px；
边框：1px实心#008f70；
背景色：#00b48c；
文本对齐：右对齐；
浮动：左；
填充：15px；
宽度：165px；
}
.button>div:first child>div:first child{
颜色：#b8e3d6；
字号：12号；
}
.按钮>div:第一个孩子>div:最后一个孩子{
颜色：#fff；
字体大小：粗体；
字号：20pt；
}
.button>div:最后一个子项{
边框右上角半径：4px；
边框右下半径：4px；
浮动：对；
右边距：9px；
背景色：#008f70；
宽度：64px；
高度：81px；
位置：相对位置；
}

用

文本

去除重复的

div

，并用

文本

向另一个

div

添加顶部和底部的

填充

您可以使用Font Awesome在下拉列表中获得插入符号


。按钮{
高度：80px；
光标：指针；
}
.按钮：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
.button>div：第一个孩子{
边框左上半径：4px；
边框左下半径：4px；
边框：1px实心#008f70；
背景色：#00b48c；
文本对齐：右对齐；
浮动：左；
填充：22px 15px 26px 15px；/*添加上下边框*/
宽度：165px；
}
.button>div:first child>div:first child{
颜色：#b8e3d6；
字号：12号；
}
.按钮>div:第一个孩子>div:最后一个孩子{
颜色：#fff；
字体大小：粗体；
字号：20pt；
}
.button>div:最后一个子项{
边框右上角半径：4px；
边框右下半径：4px；
浮动：对；
右边距：9px；
背景色：#008f70；
宽度：64px；
高度：81px；
位置：相对位置；
}
我{
左边缘：45%；
利润率最高：45%；
颜色：白色；
}

文本
只能将一个元素与
伪
元素
:before
和
:before


按钮{
边界半径：4px 0px 0px 4px；
边框宽度：1px；
边框颜色：#008f70；
边框样式：实心；
背景色：#00b48c；
文本对齐：右对齐；
填充：15px；
宽度：165px；
位置：相对位置；
颜色：白色；
}
按钮：之前{
内容：'\25BE'；
位置：绝对位置；
右：-32px；
z指数：1；
字体大小：16px；
最高：50%；
颜色：白色；
转化：translatey（-50%）；
}
按钮：之后{
内容：''；
边框右上角半径：4px；
边框右下半径：4px；
右边距：9px；
背景色：#008f70；
宽度：54px；
位置：绝对位置；
顶部：-1px；
左：100%；
底部：-1px
}
按钮：焦点{
大纲：0；
盒影：无；
}
测试
所需的一切：


button.styled{
颜色：#fff；
背景：#00B48C；/*仅更改此项，然后看到它发生；）*/
填充：10px45px10px15px；
边界半径：4px；
/*不要在下面编辑*/
边界：0；
位置：相对位置；
溢出：隐藏；
方框阴影：插入0.1px rgba（0,0,0,0.2）；
}
按钮。样式：后{
背景：rgba（0,0,0,0.2）；
填充：11px；
内容：'\25be'；/*\25bc\25be*/
/*不要在下面编辑*/
位置：绝对位置；
右：0；
排名：0；
}
Hello World
为什么不直接使用
select
element？或者？在我的project@chipChocolate.py上次检查时，很久以前，无法从
select
标记中删除内置下拉箭头。除非您模仿选择标记的行为，并且只是添加了css img规则。插入符号不是问题。尝试放大或缩小JSFIDLE。你会发现问题就在那里。顺便说一句，谢谢你的帮助suggestion@kuldarim你是说我们在放大时看到的两个元素之间的差距吗？顺便说一句，我更新了我的答案并改进了代码。@kuldarim我无法用答案中的代码重现这一点。您能检查一下吗？也许您知道为什么在firefox中，按钮的第二部分看不到光标指针？更具体地说，它在：after按钮部件中不可见。在chrome中，一切正常。您可以在此处找到一个示例：
<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;
}