效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实战 -按钮</title>
<style type="text/css">
html,body{
/*box-sizing:border-box;*/
margin:0;
height:100%;
/*background:#000000;*/
}
.acl{
background-color: #ffffff;
}
.btn-row{
height: 40px;
/*padding-bottom: 6px;*/
background-color: #7fffd4;
display: flex;
/*-webkit-box-align: center;*/
-ms-flex-align: center;
align-items: center;
padding: 10px 20px;
color: #646464;
}
.Button {
display: inline-block;
padding: 0 16px;
font-size: 14px;
line-height: 32px;
text-align: center;
cursor: pointer;
background: none;
border: 1px solid;
border-radius: 3px;
color: #06f;
}
</style>
</head>
<body>
<div style="margin-top: 100px;margin-left: 100px;background: #a09a47;width: 400px;height: 300px;">
<div class="acl" style="">
<!-- 一行 -->
<div class="btn-row">
<span>
<button type="button" class="Button VoteButton--up">
<span style="display: inline-flex; align-items: center;">
<svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"> <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path>
</svg>
</span>
赞同
</button>
<button type="button" class="Button VoteButton--up">
<span style="display: inline-flex; align-items: center;">
<svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"> <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path>
</svg>
</span>
反对
</button>
</span>
<button type="button" class="Button Button--plain" style="margin-left: 5px;">
添加评论
</button>
<span class="" style="margin-left: 16px;color: #8590a6;">10-21</span>
</div>
<!-- end -->
</div>
</div>
</body>