CSS custom shape button with two colors - html

Question

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 would like to have with the dimensions.
Thanks for your help.

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

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

Answer 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..)

Answer 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.
ABI <span>12/19</span>
#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;
}

Answer 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>