【前端】element button鼠标点击按钮更改样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端】element button鼠标点击按钮更改样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、实现效果

elementplus button不设置默认色移开后会变白色,前端,elementui,前端,elementui

二、代码如下

        <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;
  }

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~文章来源地址https://www.toymoban.com/news/detail-840368.html

到了这里，关于【前端】element button鼠标点击按钮更改样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！