切换按钮透明悬停效果答案

【问题标题】：Switch button transparent hover effect切换按钮透明悬停效果
【发布时间】：2019-01-04 04:22:11
【问题描述】：

我想在透明背景和纯色背景之间切换按钮悬停效果，但到目前为止我毁了它:( 如果有人可以帮助我，那就太好了，谢谢 Stackoverflow。

/*################ Test Button ##########*/
.tesbtn {
  color: #EE6533;
  border:solid 2px #EE6533;
  border-radius: 6px;
  box-shadow: 0 0 20px #EE6533;
  padding: 9px 9px;
  font-size: 14px;
  display: inline-block;
  width: 130px;
  margin: 10px;
  float: center;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: bold; 
  text-align: center;
  text-shadow: 0 0 5px #EE6533;
  transition-duration: 0.4s;
  -webkit-transition-duration: all 0.4s;
}
.tesbtn:hover {
  background: #EE6533;
  color: #fff;
  box-shadow: 0 12px 16px 0 rgba(238,101,51,0.24),0 17px 50px 0 rgba(238,101,51,0.19);
}
.tesbtn:last-child {
  margin-left: 5px;
}

<br/><br/>
<div style="text-align: center;">
<a class='tesbtn' href='#' target='_self'>Test</a>
  <a class='tesbtn' href='#' target='_self'>Test</a>
  </div>

【问题讨论】：

在悬停和检查时使用不透明度

标签： css button hover transparent

【解决方案1】：

如果你想让背景透明，可以使用opacity:

【讨论】：

【解决方案2】：

尝试使用变换：opacity();属性

【讨论】：