css - 带外边框的菜单栏

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>