jquery - 按钮上的标签剥离效果

Question

我希望在按钮上应用标签剥离效果。

我网站上的每个按钮都会有一个隐藏在按钮下方的优惠券代码。当用户将鼠标悬停在按钮上时，它只会显示部分代码，但不会完全显示。这个想法是为了提高点击率。

想要实现类似此页面上显示“获取优惠券代码”的按钮之类的功能。

https://www.goodsearch.com/coupons/victorias-secret#filter-promo-code

如果将鼠标悬停在“显示优惠券代码”上，您将看到效果。它仅稍微揭示了底层代码。

到目前为止我只能做到这一点

.btn.btn-code {
  background-color: #ff9800;
  color: #FFFFFF;
  border-radius: 4px;
  width: 80%;
  height: 35%;
  position: relative;
}
.btn.btn-code:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 20px solid white;
  border-left: 30px solid blue;
  /*border-left-color:#e58800;*/
  width: 0;
}

<button class="btn btn-code">
  Get Code
</button>

关于如何实现这一目标的任何帮助。我知道我距离最终结果还很远，但无法进一步，这就是为什么在这里提问。

Answer 1

您可以使用伪元素在 CSS 中尝试此效果。

看看下面的代码片段:

.margin {
  margin: 35px 20px;
}

.inner {
  position: relative;
  width: 150px;
}

.code {
  display: block;
  width: 100%;
  text-align: right;
  background: #d7ebf3;
  padding: 10px 10px 10px 60px;
  color: #33b5e5;
}

.btn {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 30px);
  cursor: pointer;
  background: #33b5e5;
  color: #fff;
  padding: 10px 30px 10px 20px;
  transition: all .2s linear;
}

.btn:hover {
  background: #00a8e6;
  width: calc(100% - 40px);
  transition: all .2s linear;
}

.btn:hover:after {
  border-bottom: 30px solid #2385a9;
  border-right: 30px solid transparent;
  right: -30px;
  transition: all .2s linear;
}

.btn:hover:before {
  width: 30px;
  height: 9px;
  background: #00a8e6;
  transition: all .2s linear;
}

.btn:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 20px;
  height: 18px;
  background: #33b5e5;
  transition: all .2s linear;
}

.btn:after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  border-bottom: 20px solid #2385a9;
  border-right: 20px solid transparent;
  transition: all .2s linear;
}

<div class="margin">
  <div class="inner">
    <span class="code">CODE</span>
    <a class="btn peel-btn">Show Coupon</a>
  </div>
</div>

希望这有帮助!