按钮上的标签剥离效果

我正在寻找在按钮上应用标签剥离效果。按钮上的标签剥离效果

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

想要获得类似于此页上的“获取优惠券代码”按钮的内容。

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>

任何帮助我如何能做到这一点。我知道我离最终结果还很远，但无法进一步发展，那就是为什么在这里问这个问题。

来源

2016-12-27 Gaurav Mehta

不太清楚，你想达到什么目的。 – aavrug

链接的JSFiddle与此有什么关系？ – Xufox

@aavrug增加了更多细节。请让我知道如果它仍然不清楚。 –

你可以在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>

希望这有助于！

来源

2016-12-27 07:03:41

谢谢。你知道我能如何显示仅仅部分显示的代码吗？ –

按钮上的标签剥离效果

回答

相关问题