你好,想请教一下,这个单选按钮组的样式怎么做。css样式。求大神指教。

2020-04-27 教育 100阅读
html>



javascript


.button a{
display: inline-block;
width: 125px;
height: 55px;
border: 2px solid #c1c1c1;
color: #C1C1C1;
border-radius: 5px;
line-height: 55px;
text-align: center;
font-family: "微软雅黑";
font-size: 16px;
text-decoration: none;
margin-right: 20px;
position: relative;
}

.button a.on,
.button a:hover{
color: #39d17c;
border: 2px solid #39d17c;
position: relative;
}
.button a.on:after,
.button a:hover:after{
display: inline-block;
content: '\20';
color: #fff;
position: absolute;
width: 0;
height: 0;
border-width: 15px 20px 15px 20px;
border-style: solid;
border-color: transparent #39d17c #39d17c transparent;
bottom: 0;
right: 0;
z-index: 1;
}
.button a.on:before,
.button a:hover:before{
display: inline-block;
bottom: 0;
right: 0;
content: '√';
color: #fff;
position: absolute;
z-index: 2;
width: 25px;
height: 37px;
}




个人用户
商家用户


声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com