0
メニューバーを作りたいです。私はすでにゴーストボタンを行うために管理が、どのように私はメニューのために、この枠の罫線を行うことができます。 http://i.stack.imgur.com/wwBVw.jpg これは私のコードです:https://jsfiddle.net/ivailo/3q6ej7cc/メニューバー外枠付き
.button {
position:relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none ;
overflow: hidden;
border-radius: 7px;
}
.button::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
color #fffff;
display: block;
content: '';
width: 15em;
height: 15em;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0s;
}
.button:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99,.2);
}
.button:hover {
color: #000000;
}
.button1 {
position:relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none ;
overflow: hidden;
border-radius: 7px;
}
.button1::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
display: block;
content: '';
width: 15em;
height: 15em;
transform: translate(-50%, -50%);
transition: all 0s;
}
.button1:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99,.2);
}
.button1:hover {
color: #000000;
}
ボーダーとして機能するように、それをスタイルラインの内側の効果については、私はCSSでのみフォトショップでこれを行うことができるもの、ありがとう! @AllanEmpalmado – ivailo