CSSを使用して複雑なボタンスタイルを実装する方法

Question

少し問題がありました。私はウェブサイトのデザインを実装しており、ちょっと複雑なボタンスタイル（ここに添付）を実装する必要があります。私はCSSだけを使ってそれをどうやって作るのか分かりません。

それはつもりいくつかのボタンスタイルになるのとの一方が透明な背景である必要があり、このボタンが配置された要素から背景色を取得する必要があります。 CSSを使って設定できるカスタム背景のボタンを実装しました。しかし、柔軟に使用することはできません。

ポイントは、私は「できることです：私はさまざまな背景の上にそれを使用したい場合は、今、私は透明な背景のスタイルを持っており、それが見えます「BTN-customColor」などのような新しいスタイルを追加する必要があります透明な背景を持つ上のブロックの下にある下のブロックの部分をカットまたは隠す。私は色を設定することができ、それは最初のイメージのようになります。しかし、それはボタンの使用を制限します。

私はPhotoshopでボタンを描く別のアイデアを持っていましたが、それは本当に良いアプローチではなく、多くの "いいえ"があります。ここに。おそらくキャンバスやスムースを使って実装することは可能でしょうか？そんな？それがあれば、記事などのリンクをいくつか共有していれば素晴らしいだろう。

利用可能なスタッフがいます：HTML、CSS、JS（jQuery）。

私は問題が何であるか説明したいと思う。 アイデアや助けをいただければ幸いです。

ありがとうございます。

.btn-base { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 30px; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    background: transparent; 
 
    border: 2px solid #fff; 
 
    font-size: 12px; 
 
    transition: 0.5s; 
 
} 
 

 
.btn-base>div { 
 
    position: relative; 
 
    width: 101%; 
 
    left: 3px; 
 
    bottom: 8px; 
 
    padding: 5px 15px; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    background: #e4645d; 
 
    /* hardcoded code, must be transparent */ 
 
    border: 2px solid #fff; 
 
    font-size: 12px; 
 
}

<button type="submit" class="btn-base btn-transparent"> 
 
    <div>Button example</div> 
 
</button>

Answer 1

代替ソリューションとして擬似要素を使用を検討してください。

この方法は、下に埋め込まれたコードスニペットでx3の背景色が異なることを実証しています。

コードスニペットデモンストレーション：回答のすべてを見てみると

.row { 
 
    padding: 20px; 
 
} 
 

 
.row:nth-child(1) { 
 
    background: #e4645d; 
 
} 
 

 
.row:nth-child(2) { 
 
    background: #5dace4; 
 
} 
 

 
.row:nth-child(3) { 
 
    background: #5fe45d; 
 
} 
 

 
.btn-base { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 30px; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    background: transparent; 
 
    border: 2px solid #fff; 
 
    font-size: 12px; 
 
    transition: 0.5s; 
 
    /* added */ 
 
    position: relative; /* required for absolutely positioned pseudo-elements */ 
 
    padding: 0px 10px; 
 
} 
 

 
/* Additional */ 
 

 
.btn-base:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 7px; 
 
    height: 30px; 
 
    border: 2px solid #fff; 
 
    border-right: 0; 
 
    right: 100%; 
 
    bottom: -5px; 
 
    top: 5px; 
 
    border-top-left-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 
    box-sizing: border-box; 
 
} 
 

 
.btn-base:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border: 2px solid #fff; 
 
    height: 9px; 
 
    border-top: 0; 
 
    border-left: 0; 
 
    right: 5px; 
 
    left: 0; 
 
    bottom: -9px; 
 
    border-bottom-right-radius: 3px; 
 
    box-sizing: border-box; 
 
}

<div class="row"> 
 
    <button type="submit" class="btn-base btn-transparent">Button example</button> 
 
</div> 
 
<div class="row"> 
 
    <button type="submit" class="btn-base btn-transparent">Button example</button> 
 
</div> 
 
<div class="row"> 
 
    <button type="submit" class="btn-base btn-transparent">Button example</button> 
 
</div>

Answer 2

は、あなただけの、ボックスシャドウプロパティ

body{ 
 
    background:#e4645d; 
 
    text-align:center; 
 
} 
 
.btn-base { 
 
    padding: 10px; 
 
    margin: 0; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    background: transparent; 
 
    border: 2px solid #fff; 
 
    font-size: 12px; 
 
    transition: 0.5s 
 
    color:white; 
 
     box-shadow: -10px 10px 0 -2px #e4645d, -10px 10px 0 0px white; 
 
}

<button type="submit" class="btn-base btn-transparent"> 
 
    Button example 
 
</button>

Answer 3

はここだと私はそれを行うだろうどのようにそれを行うことができます。マークアップを変更して、一般的なラッパーの兄弟にしました。私はbackground-color: inerhitを使用しました。コンセプトの証明：

.btn-base { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 30px; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    background: transparent; 
 
    border: 2px solid #fff; 
 
    font-size: 12px; 
 
    transition: 0.5s; 
 
    color: white; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.button-holder>div { 
 
    color: white; 
 
    position: relative; 
 
    width: calc(100% + 2px); 
 
    left: 5px; 
 
    bottom: 8px; 
 
    padding: 5px 15px; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    background-color: inherit; 
 
    border: 2px solid #fff; 
 
    font-size: 12px; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-color: teal; 
 
} 
 

 
.button-holder { 
 
    background-color: inherit; 
 
    display: inline-block; 
 
    position: relative; 
 
}

<div class="button-holder"> 
 
    <button type="submit" class="btn-base btn-transparent"></button> 
 
    <div>Button example</div> 
 
</div>

Answer 4

あなたはマルチボーダーの外観を作成するために、ボックスシャドウを使用して国境を模倣することができます。

例：最近のブラウザ（IE /エッジ除く）については

button { 
 
    border: 0; 
 
    background: #666; 
 
    box-shadow: -8px 8px 0 -4px #FFF, 
 
       -8px 8px 0 0px #666; 
 
}

<button>Sample</button>

Answer 5

あなたはclip-path CSSプロパティを使用してのみに背中に要素をクリップするポリゴンを作成することができますあなたが望む部品を見せてください。

これは、それがイメージ上でさえも表示されるという意味で、それを真に透明にします。

body{background:url('https://placeimg.com/640/480/animals') no-repeat;} 
 
.btn-base { 
 
    margin: 0; 
 
    height: 30px; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    border: 2px solid currentColor; 
 
    font-size: 12px; 
 
    transition: 0.5s; 
 
    padding: 5px 15px; 
 
    font-size: 12px; 
 
    position:relative; 
 
    background:transparent; 
 
    color:#fff; 
 
    cursor:pointer; 
 
} 
 

 
.btn-base:before { 
 
    content:''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height:100%; 
 
    left: -7px; 
 
    bottom: -10px; 
 
    border-radius: 3px; 
 
    /* hardcoded code, must be transparent */ 
 
    border: 2px solid currentColor; 
 
    cursor:pointer; 
 

 
-webkit-clip-path: polygon(0 0, 5% 0, 5% 88%, 100% 88%, 100% 100%, 0 100%); 
 
clip-path: polygon(0 0, 5% 0, 5% 70%, 100% 70%, 100% 100%, 0 100%); 
 
}

<button type="submit" class="btn-base"> 
 
    Button example 
 
</button>