按鈕上的標籤剝離效果

我正在尋找在按鈕上應用標籤剝離效果。按鈕上的標籤剝離效果

我網站上的每個按鈕都會有一個隱藏在按鈕下方的優惠券代碼。當用戶懸停在按鈕上時，它只顯示部分代碼，但未完全顯示。這個想法是增加點擊率。

想要獲得類似於此頁上的「獲取優惠券代碼」按鈕的內容。

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

謝謝。你知道我能如何顯示僅僅部分顯示的代碼嗎？ –

按鈕上的標籤剝離效果

回答

相關問題