你好，想请教一下，这个单选按钮组的样式怎么做。css样式。求大神指教。
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript</title>
<script src="js/js.js" type="text/javascript"></script>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="button">
<a href="#" class="on">个人用户</a>
<a href="#">商家用户</a>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
