CODEWITHSUNDEEP
htmlcssbutton
kuldarim
kuldarim

Reputation: 1106

CSS3 button with two colours

I wanted to ask what is the best way to create such button with css:

enter image description here

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

Upvotes: 3

Views: 3276

Answers (3)

Rahul Desai
Rahul Desai

Reputation: 15501

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

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206101

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

Upvotes: 4

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

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>

Upvotes: 1

Related Questions