如何缓和按钮元素上的边框颜色？

Posted 2023-03-06

【中文标题】如何缓和按钮元素上的边框颜色？

【英文标题】：How to ease-out border-color on button elements?

【发布时间】：2017-11-28 22:03:56

【问题描述】：

这是我的website（目前正在构建移动版）。这是该网站的repository。

button 
  background-color: #fff;
  border: 3px solid #efefef;
  border-radius: 0.35em;


button:hover 
  border-color: #49bf9d;
  transition: border 0.2s ease-in-out;

当我将鼠标悬停在按钮元素上时，我遇到了让按钮元素上的边框颜色缓和的问题。不过，缓入过渡效果很好。

有什么想法吗？

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website doesn't work can I just paste a link。

抱歉，我对 Stack Overflow 还是很陌生。我已经进行了必要的更改。

【参考方案1】：

试试这个

在按钮上添加过渡属性而不是悬停

CSS

button

    transition: border 0.2s ease-in-out !important;

希望这会有所帮助..

【参考方案2】：

将此添加到您的 CSS 中：

button 
  transition: 0.4s ease-out all;
  border: 4px solid black;


button:hover 
  transition: 0.4s ease-in all;
  border-color: red;

您还可以为旧版浏览器添加-moz-transition 和-webkit-transition。

【讨论】：

当然可以改变按钮的边框。这只是一个例子。您很可能忘记了按钮元素本身中的transition。