通常のボーダー+ CSS

Question

css button with double border

を使用してボタンの境界線をオフセット私は上記のボタンで同じボーダー効果をacheiveしようとしています。

私が得ることができる最も近い次の通りであるが、下側の境界線の右下隅が適切に四捨五入されていません。

>

.login__button { 
    background: transparent; 
    border: none; 
    border-width: 2px 1px 2px 2px; 
    border-style: solid; 
    border-color: pink; 
    border-radius: 4px; 
    color: pink; 
    margin-bottom: 100px; 
    position: relative !important; 
    text-transform: uppercase; 
    height: 33px; 
    width: 102px; 
    box-shadow: 
    3.5px 4px 0px black, 
    1.5px 0px 0px pink, 
    3.5px 4px 0px black, 
    2px 6px 0px pink; 
} 

.login__button::before { 
    background: pink; 
    content: ''; 
    position: absolute; 
    height: 35px; 
    width: 3.0px; 
    border-radius: 3px; 
    top: 3%; 
    right: -2.8px; 
} 

>

私はこのように感じるのでなければなりません可能なのはボックスシャドーだけですが、ボックスの影の幅を変更して黒の部分だけを適切に挿入する方法はありません。

Answer 1

だから、アイデアは.login__button:beforeは基本的に.login__buttonと同じように見えますが、位置を変更するには、それに.login__buttonよりz-index下を与えるようにすることです。

.login__button { 
 
    background-color: black; 
 
    border: 2px solid #FF00A0; 
 
    border-radius: 4px; 
 
    color: #FF00A0; 
 
    position: relative; 
 
    font-size: 15px; 
 
    height: 33px; 
 
    width: 102px; 
 
    cursor: pointer; 
 
} 
 
.login__button:before { 
 
    content: ''; 
 
    background-color: black; 
 
    border: 2px solid #FF00A0; 
 
    border-radius: 4px; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 34px; 
 
    top: -2px; 
 
    left: -2px; 
 
    z-index: -1; 
 
    cursor: pointer; 
 
    box-shadow: 0 0 20px rgb(255,0,160); 
 
} 
 
.login__button:active { 
 
    background-color: gold; 
 
} 
 
.login__button:active:before { 
 
    background-color: gold; 
 
}

<button class="login__button">LOG IN</button>

そして、ちょうどそれのために、私は、ボタンが押されているのスタイルを追加しました。

.login__button:active { 
    background-color: gold; 
} 
.login__button:active:before { 
    background-color: gold; 
} 

Answer 2

私の試みです。

.login__button { 
 
    background: black; 
 
    border: 4px solid #FF69B4; 
 
    color: #FF69B4; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    padding: 1em; 
 
    display: inline-block; 
 
    border-radius: 3px; 
 
} 
 

 
.login__button::before { 
 
    content: ''; 
 
    background: black; 
 
    border: 4px solid #FF69B4; 
 
    margin-left: -4px; 
 
    position: absolute; 
 
    border-radius: 3px; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 12px; 
 
    left: 0; 
 
    z-index: -1; 
 
}

<a href="#" class="login__button">Link</a>

Answer 3

これがあなたが探しているものなのかどうかはわかりませんが、ここには私がしていることがあります。

#a, #b{ 
 
    border: 2px solid magenta; 
 
    border-radius: 4px; 
 
} 
 
#a{ 
 
    border-top: none; 
 
    width: 20%; 
 
    box-shadow: 0 0 8px magenta; 
 
    background: linear-gradient(to bottom, magenta 0%, black 24%); 
 
} 
 
#b{ 
 
    color: magenta; 
 
    background-color: black; 
 
    padding: 4px; 
 
    margin-bottom: 4px; 
 
    text-align: center; 
 
}

<div id='a'> 
 
<div id='b'> 
 
Button 
 
</div> 
 
</div>

Answer 4

* { 
 
    box-sizing: content-box; 
 
} 
 

 
body { padding: 50px; } 
 

 
.login__button { 
 
    border: 2px solid fuchsia; 
 
    border-radius: 4px; 
 
    color: fuchsia; 
 
    background: black; 
 
    text-transform: uppercase; 
 
    height: 33px; 
 
    width: 102px; 
 
    position: relative; 
 
    box-shadow: 0 8px 20px 8px rgba(227,37,243,0.3); 
 
} 
 

 
.login__button::before { 
 
    background: black; 
 
    border: 2px solid fuchsia; 
 
    content: ''; 
 
    position: absolute; 
 
    border-radius: 4px; 
 
    width: 100%; 
 
    height: 5px; 
 
    bottom: -7px; 
 
    left: -2px; 
 
}

<button class="login__button">LOG IN</button>