Question

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

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

希望获得类似按钮的说法＆＃34;获取优惠券代码＆＃34;在这个页面上。

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

如果将鼠标悬停在显示优惠券代码上，您将看到效果。它只是略微暴露了底层代码。

到目前为止，我只能进入这个

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

有关如何实现这一目标的任何帮助。我知道我离最终结果还很远，但不能再进一步了，这就是为什么要在这里提问。

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>

希望这有帮助！

标签剥离效果按钮

1 个答案: