html css3 按钮样式,html – 如何使用CSS实现复杂的按钮样式

考虑使用伪元素作为替代解决方案.

此方法在下面嵌入的代码段中针对x3不同的背景颜色进行了演示.

代码片段演示：

.row {

padding: 20px;

}

.row:nth-child(1) {

background: #e4645d;

}

.row:nth-child(2) {

background: #5dace4;

}

.row:nth-child(3) {

background: #5fe45d;

}

.btn-base {

padding: 0;

margin: 0;

height: 30px;

outline: none;

border-radius: 3px;

background: transparent;

border: 2px solid #fff;

font-size: 12px;

transition: 0.5s;

/* added */

position: relative; /* required for absolutely positioned pseudo-elements */

padding: 0px 10px;

}

/* Additional */

.btn-base:before {

content: "";

position: absolute;

width: 7px;

height: 30px;

border: 2px solid #fff;

border-right: 0;

right: 100%;

bottom: -5px;

top: 5px;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

box-sizing: border-box;

}

.btn-base:after {

content: "";

position: absolute;

border: 2px solid #fff;

height: 9px;

border-top: 0;

border-left: 0;

right: 5px;

left: 0;

bottom: -9px;

border-bottom-right-radius: 3px;

box-sizing: border-box;

}

Button example

Button example

Button example