带外边框的菜单栏

Question

我想做这个菜单栏。我已经设法做了幽灵按钮，但我怎样才能为菜单制作这个轮廓边框： 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;
}

Answer 1

检查下面的代码，我用 div 包围了 2 个按钮并将其设置为边框 :-)

.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;
}

.theborder { 
    text-align : center;
    width: 600px;
    padding: 20px 25px;
}

.theborder:before, .theborder:after {
    content: "";
    height: 1px;
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(160,160,160,1) 50%,rgba(0,0,0,0) 100%);
    display: block;
    margin : 10px 0px;
}

<div class="theborder">
  <a class="button" href="#"> Button </a>
  <a class="button1" href="#"> Button1 </a>
</div>

带外边框的菜单栏

Menu bar with outside border

css

menubar