Кнопка переключения прозрачного эффекта при наведении

Question

Я хочу переключить эффект наведения кнопки между прозрачным фоном и однотонным фоном, но пока я испортил его :( Если кто-то может мне помочь, это будет здорово, спасибо 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>

Answer 1

попробуйте использовать преобразование: opacity ();свойство

Answer 2

, если вы хотите сделать фон прозрачным, вы можете использовать opacity: