【前端】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;  }

🚀写在最后

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

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-02/152777.html，文章来源：网络cs，作者：淼淼，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！