CSS实战 - 奇Y技巧之div展示

CSS实战：创建响应式按钮

最新推荐文章于 2025-06-20 03:47:14 发布

原创最新推荐文章于 2025-06-20 03:47:14 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

前端日常专栏收录该内容

65 篇文章

订阅专栏

这篇博客展示了如何使用CSS来创建具有不同样式和功能的按钮，包括赞同和反对的投票按钮以及添加评论的普通按钮。代码示例中详细定义了按钮的布局、颜色、边框和内联SVG图标，体现了CSS在前端开发中的应用。

效果：
在这里插入图片描述


<!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>