CSS3 button with two colors
I wanted to ask what is the best way to create a button like this using css:
I tried to create a button like this with a div using float left and right, but when I increase and decrease the right side of the button, it crashes. Is there a better way to achieve this?
<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;
}
source to share
All that is required:
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 information on UTF-8 characters see: fooobar.com/questions/84222 / ...
source to share
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 carriage mark in the dropdown menu.
.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>
source to share
you can only use one item with pseudo
items :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>
source to share