码迷,mamicode.com
首页 > 其他好文 > 详细

简单的按钮样式,两个连在一起的按钮

时间:2020-06-29 09:21:40      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:eee   back   nowrap   wrap   enter   col   白名单   width   isp   

样式效果:技术图片

 

 

<div class="btnBox">
  <button class="btn btn1">白名单用户</button>
  <button class="btn btn2">黑名单用户</button>
 </div>


<style type="text/css">
  .btnBox{
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
  }
  .btn{
   width: 80px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   font-size: 12px;
   background-color: #fff;
  }
  .btn1{
   border: 1px solid #0382FF;
   color: #0382FF;
  }
  .btn2{
   border: 1px solid #eee;
   color: #666;
  }
 </style>

 

简单的按钮样式,两个连在一起的按钮

标签:eee   back   nowrap   wrap   enter   col   白名单   width   isp   

原文地址:https://www.cnblogs.com/njccqx/p/13206068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!