css怎么定义button颜色,两种颜色的CSS自定义形状按钮

东西

HTML

ABI

12/19

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;

}