html css 选择按钮样式,html/css中国风按钮样式

想模仿这个

根据页面风格去掉了圆角部分，简单模仿了个出来，结果特别像电池。555~~

这次没用上，先备份了，以后再用时候可以直接拿过来改改再用。

上一题

下一题

.submitArea .navbar {

display: flex;

flex-direction: row;

justify-content: space-around;

align-content: center;

align-items: center;

}

.submitArea .navbar .nav {

position: relative;

width: 94px;

height: 33px;

line-height: 33px;

margin: 0 15px;

padding: 0;

color: #fff;

border-radius: 0;

background: #7F9BDC;

border: 1px solid #7F9BDC;

box-sizing: border-box;

text-align: center;

opacity: 0.7;

}

.left-bg, .right-bg {

display: block;

position: absolute;

top: 5px;

left: -7px;

width: 8px;

height: 20px;

border-radius: 0;

background: #7F9BDC;

}

.right-bg {

left: auto;

right: -7px;

}

.submitArea .navbar

.nav:after {

display: block;

position: absolute;

top: 3px;

left: 4px;

width: 85px;

height: 25px;

content: '';

border-radius: 0;

border: 1px solid rgba(255,255,255,0.7);

box-sizing: border-box;

}

.left-bg:after, .right-bg:after {

display: block;

position: absolute;

top: 3px;

left: 4px;

width: 9px;

height: 14px;

content: '';

background: #7F9BDC;

border: 1px solid;

border-color: rgba(255,255,255,0.7) transparent rgba(255,255,255,0.7) rgba(255,255,255,0.7);

box-sizing: border-box;

z-index: 9;

}

.right-bg:after {

left: auto;

right: 4px;

border-color: rgba(255,255,255,0.7) rgba(255,255,255,0.7) rgba(255,255,255,0.7) transparent;

}

.squre, .squre:after {

position: absolute;

left: 11px;

top: 3px;

width: 3px;

height: 3px;

/* background: rgba(255,255,255,0.7); */

border: 1px solid rgba(255,255,255,0.7);

z-index: 99;

box-sizing: border-box;

}

.squre:after {

left: -1px;

top: auto;

bottom: -12px;

content: '';

}

.right-bg .squre, .right-bg .squre:after {

left: auto;

right: 10px;

}

.right-bg .squre:after {

right: -1px;

}