ボタンのラベル貼り付け効果

Question

ボタンのラベル貼り付け効果を適用したいと考えています。

私のサイトの各ボタンには、ボタンの下に隠されたクーポンコードがあります。ユーザーがボタン上を移動すると、コードの一部のみが表示されますが、完全には表示されません。考え方はCTRを上げることです。

このページの「クーポンコードを取得する」と言うボタンを実現したいですか？

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>

に私はこれを達成する方法上の任意の助けを得ることができました。私は最終結果からかなり遠いけど、それ以上は得ることができないことを知っている、なぜここにそれを求めるのか。

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>

・ホープ、このことができます：

は、以下のスニペットを見てください！