自定义Bootstrap CSS中的按钮悬停状态，悬停时显示下边框

nvbavucw 于 2023-01-22 发布在 Bootstrap

关注(0)|答案(1)|浏览(195)

按钮的默认Bootstrap CSS使用颜色的细微变化来指示悬停状态（悬停按钮在左侧）：

我想在我的项目中使用引导CSS，但我需要自定义按钮样式，使按钮看起来类似于（鼠标悬停在左边的按钮）：

也就是说，当鼠标悬停时，我希望按钮有一个底部边框。
我使用的是sass。导入React应用程序的.scss样式表当前如下所示：

$btn-border-radius: 0;

@import '~bootstrap/scss/bootstrap.scss';

问：是否可以自定义Bootstrap的按钮样式来实现这一点？如果可能，最简单/正确/最好的方法是什么？

css

来源：https://stackoverflow.com/questions/75161190/customize-button-hover-state-in-bootstrap-css-display-bottom-border-when-hovere

1条答案

按热度按时间

e1xvtsh31#

我猜你想要的是这样的东西？

a.btn-custom {
    background: #444f55;
    font-family:"helvetica";
    color: #fff;
    font-size: 1em;
    border-radius: 0;
    border-bottom: solid 3px #444f55;
    padding:10px 15px 5px;
}

a.btn-custom:hover{
  background: #444f55;
  border-bottom: solid 3px #F89601;
  color: #fff;
}
a.btn-custom:active{
  background: #555758;
  color: #fff;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <a class="btn btn-custom">Mi link</a>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-22

我来回答

自定义Bootstrap CSS中的按钮悬停状态，悬停时显示下边框

1条答案

相关问题

热门标签

最新问答