CSS3 button with two colours - html

Question

I wanted to ask what is the best way to create such button with css:
I was trying to create such button with divs using float left and right, but when i zoom in and out right side of the button drops down. Is there a better way to achieve this?
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

All it takes:
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>
For more UTF-8 characters see: https://stackoverflow.com/a/25986009/383904

Answer 2

you can use only one element with pseudo elements :before and :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>

Answer 3

Get rid of the duplicate div with text and add top and bottom padding to the other div with text.
You can use Font Awesome to get the caret sign in the dropdown.
.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>
Updated jsFiddle
Source