1

I am looking to apply a label peel effect on button.

Each button on my site will have a coupon code that is hidden below a button. When a user hovers on the button, it reveals only part of the code but doesn't reveal fully. The idea is to increase CTR.

Want to achieve something like the buttons that say "Get Coupon Code" on this page.

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

If you hover the mouse on Show Coupon Code, you will see the effect. It is revealing the underlying code only slightly.

So far I have only been able to get to this

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

Any help on how I can achieve this. I know I am pretty far from the end result but can't get further, thats why asking it here.

9
  • Not so much clear, what you want to achieve.
    – aavrug
    Dec 27, 2016 at 6:43
  • What does the linked JSFiddle have to do with this? Dec 27, 2016 at 6:45
  • @aavrug added more details. please let me know if it is still unclear. Dec 27, 2016 at 6:45
  • @Xufox the linked JS Fiddle is what I was trying to do. I was just able to add a corner but still not able to add the hover effect as seen on the page listed above. Dec 27, 2016 at 6:46
  • @GauravMehta It is stll not so much clear because your jsfiddle link is different and your code snippet is different and also nothing happening on hover.
    – aavrug
    Dec 27, 2016 at 6:52

2 Answers 2

3

You can try this effect in CSS using pseudo elements.

Have a look at the snippet below:

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

Hope this helps!

1
  • Thanks. Do you know how I can show the code behind it which is revealed only partially? Dec 27, 2016 at 7:05
0

Solution for rounded buttons: https://yepteam.github.io/sticker-button/ (SCSS customization required)

enter image description here

Has performance issues with animation in Safari.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.