Jquery 按钮上的标签剥离效果

我正在寻找适用于按钮的标签剥离效果

我网站上的每个按钮都有一个隐藏在按钮下面的优惠券代码。当用户将鼠标悬停在按钮上时，它只显示部分代码，但不会完全显示。我们的想法是增加CTR

希望实现类似于此页面上显示“获取优惠券代码”的按钮

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

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

.btn.btn-code{
背景色：#ff9800；
颜色：#FFFFFF；
边界半径：4px；
宽度：80%；
身高：35%；
位置：相对位置；
}
.btn.btn代码：之前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
边框顶部：20px纯白；
左边框：30px纯蓝色；
/*左边框颜色：#e58800*/
宽度：0；
}

获取代码

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

请看下面的代码片段：

.margin{
利润率：35px 20px；
}
.内部{
位置：相对位置；
宽度：150px；
}
.代码{
显示：块；
宽度：100%；
文本对齐：右对齐；
背景#d7ebf3；
填充：10px 10px 10px 60px；
颜色：#33b5e5；
}
.btn{
位置：绝对位置；
排名：0；
左：0；
宽度：计算（100%-30px）；
光标：指针；
背景：#33b5e5；
颜色：#fff；
填充：10px 30px 10px 20px；
过渡：全部.2s线性；
}
.btn:悬停{
背景：#00a8e6；
宽度：计算（100%-40px）；
过渡：全部.2s线性；
}
.btn:悬停：之后{
边框底部：30px实心#2385a9；
右边框：30px实心透明；
右：-30px；
过渡：全部.2s线性；
}
.btn:悬停：之前{
宽度：30px；
高度：9px；
背景：#00a8e6；
过渡：全部.2s线性；
}
.btn:之前{
内容：''；
位置：绝对位置；
底部：0；
左：100%；
宽度：20px；
高度：18px；
背景：#33b5e5；
过渡：全部.2s线性；
}
.btn:之后{
内容：''；
位置：绝对位置；
排名：0；
右：-20px；
边框底部：20px实心#2385a9；
右边框：20px实心透明；
过渡：全部.2s线性；
}

代码
出示优惠券

不太清楚您想要实现什么。链接的JSFIDLE与此有什么关系？@aavrug添加了更多细节。如果还不清楚，请告诉我。@Xufox链接的JS小提琴是我试图做的。我只添加了一个角，但仍然无法添加悬停效果，如上面列出的页面所示。@GauravMehta它不是很清楚，因为您的JSFIDLE链接不同，您的代码片段不同，悬停上也没有发生任何事情。谢谢。你知道我如何显示它背后的代码，而这些代码只显示了一部分吗？