CSS练习自定义按钮样式

NGC_2070

已于 2022-03-27 17:50:32 修改

阅读量575

点赞数

分类专栏： # HTML与CSS进阶文章标签： css

于 2022-03-27 17:40:25 首次发布

本文链接：https://blog.csdn.net/baidu_41388533/article/details/123777467

版权

HTML与CSS进阶专栏收录该内容

42 篇文章 0 订阅

订阅专栏

CSS练习自定义按钮样式

<button  className='add-usr-btn'>
    <i class="add-usr-icon"></i>
    <span class="add-usr-text">添加新用户</span>
</button>

less样式文件：

.top-btn {
    background-color: #388dff;
    color: #fff;
    border: 0px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }

  .add-usr-btn {
    .top-btn();
    padding: 5px 10px;
    display: flex;
    align-items: center;

    .add-usr-icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      padding: 0px;
      background-size: cover;  
      background-position: center center;
      margin-right: 5px;
      background-image: url(./assets/add_usr.png);  
    }
    .add-usr-text {
      display: block;
      text-align: center;
    }
  }

  .add-usr-btn:hover {
    background-color: #61abff;
  }
 }