【前端】element button鼠标点击按钮更改样式

一、实现效果

二、代码如下

        <span>
          <el-button type="text">
            <img src="../../../../../src/assets/slice/question.png" style="font-size: 14px;margin-bottom: 0.26rem">
            <span style="margin-top: 0.22rem">按钮1</span>
          </el-button>
          <el-button style="margin-left: 0.5rem" plain>按钮2</el-button>
        </span>

/*鼠标激活*/
  /deep/.el-button--text.is-active,
  /deep/.el-button--text:active {
  background: #EDF0F5;
  border-color: #EDF0F5;
  color: #EDF0F5;
}
  /*鼠标点击时边框颜色去掉*/
  /deep/.el-button--text:focus {
  outline: none;
}
  /*鼠标悬浮*/
  /deep/.el-button--text:hover {
  background: #EDF0F5;
  border-color: #EDF0F5;
  color: #78808F;
}
  /deep/.el-input__inner {
    /*height: 32px;*/
    border-radius: 0;
    font-size: 0.875rem;
  }
  /deep/.el-button {
    height: 32px;
    border-radius: 2px;
    opacity: 1;
    /*border: 1px solid #E0E0E0;*/
    padding: 0 1.5rem;
  }
  /deep/.el-button--text {
    color: #78808F;
    background-color: #ffffff;
    border-color: #ffffff;
    padding: 0.5rem 0.6rem;
  }

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~