CSS Custom Shape Button With Two Colors

I am struggling to create this 'button' using CSS. I also would like to be able to add the text 'ABI' and '12/19' manually in my HTML so I can change it. Attached the result I wou

Solution 1:

I had fun creating it, it is not perfect and you will need some tweaking to get it exacly like the image but it should get you on the right path :

FIDDLE DEMO

html:

<div id="abi">ABI</div>
<div id="number">12/19</div>

CSS

div{
    float:left;
    height:60px;
    line-height:60px;
    font-size:20px;
    margin:0;
    padding:0;
}
#abi{
    width:75px;
    background:gray;
    color:blue;
    padding-left:25px;
    position:relative;
    z-index:2;
    -webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#abi:after{
    content:"";
    position:absolute;
    right:-10px;
    top: 19px;
    width: 0; 
    height: 0; 
    border-top: 11px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid gray;
}
#number{
    width:155px;
    text-align:right;
    padding-right:25px;
    background:blue;
    color:gray;
    -webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;

}

Solution 2:

Something

LIKE THIS?

HTML

<div class='button'>ABI
    <div>12/19</div>
</div>

CSS

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.button, .button div {
    color:grey;
    background:#007bff;
    display:inline-block;
    line-height:60px;
    font-size:20px;
}
.button div {
    padding-right:25px;
    padding-left:25px;
    width:180px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index:1;
    text-align:left;
    position:relative;
}
.button {
    color:#007bff;
    background:grey;
    padding-left:25px;
    width:280px;
    text-align:right;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position:relative;
    z-index:1;
}
.button div:after {
    content:'';
    display:block;
    position:absolute;
    left:0px;
    top:20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent grey;
    z-index:0;
}

Solution 3:

Also did one for fun.. :)

Fiddle

CSS

   .btn{
    position: relative;
    border-radius: 10px;
    display: table;
    font-size: 35px;
    font-family: Verdana, sans-serif;
    width: 280px;
    height: 60px;
    background: #2a2c2b;
}

.left{
    position: relative;
    padding-left: 25px;
    color: #0ebfe9;
    display: table-cell;
    width: 100px;
    vertical-align: middle;
}

.right{
    color: #2a2c2b;
    display: table-cell;
    width: 180px;
    vertical-align: middle;
    padding-left: 14px;
    padding-right: 25px;
}

.left:after
{
    height: 0px;
    content: '';
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #2a2c2b;
    position: absolute;
    left:90px;
}

HTML

<div class="btn"><span class="left">ABI</span><span class="right">| 12/19</span></div>

(background of btn are gradients, couldn't get them in the code here..)

Solution 4:

Looked like fun, had to try it myself: http://jsfiddle.net/8SUX6/1/

Change href="#" to a link, to make it one or add a onclick event for it to execute JS.

<a href="#" id="button">ABI <span>12/19</span></a>

#button {
font-weight: 600;
height: 60px;
width: 60px; /* 60 + 25 + 15 = 100 */
display: block;
text-decoration: none;
background: #2A2C2B;
color: #0EBFE9;
position: absolute;
border-radius: 5px 0 0 5px;
font-family: Segoe UI;
font-size: 40px;
padding-left: 25px;
padding-right: 15px;
}

#button:before {
left: 93px;
top: 10px;
z-index: 3;
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 20px solid #2A2C2B;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

#button span {
top: 0;
letter-spacing: 2px;
color: #2A2C2B;
position: absolute;
z-index: 2;
height: 60px;
width: 155px; /* 155 + 25 = 180px */
background: #0EBFE9;
position: absolute;
left: 100px;
border-radius: 0 5px 5px 0;
padding-right: 25px;
text-align: right;
}

Solution 5:

The following can be the css

*{
  margin:0;
  padding:0;
  }

 div{
   float:left;
   margin-top:10px;
   font-size:20px;
   font-weight:bold;
   text-align:center;
   height:60px;
 }

 .abi{
   margin-left:10px;
   width:100px;
   background:#2A2C2B;
   color:#0EBFE9;
   border-radius:10px 0 0 10px;
  }

  .abi>p,.num>p{
    padding-top:15px;
  }

  .num{
   color:#2A2C2B;
   background:#0EBFE9;
   margin-right:10px;
   width:180px;
   border-radius:0 10px 10px 0;
  }

  .abi:after{
border-bottom: 10px solid transparent;
    border-left: 10px solid #2A2B2C;
    border-top: 11px solid transparent;
    content: "";
    position: absolute;
    left: 110px;
    top: 29px;
   }

the following is the html

<div class="abi"><p>ABI</p></div>
<div class="num"><p>12/19</p></div>