바깥 경계가있는 메뉴 모음

Question

이 메뉴 모음을 만들고 싶습니다. 난 이미 유령 버튼을 관리,하지만 어떻게 내가 메뉴에 대해이 윤곽 국경 할 수 있습니다 : 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

내가 사업부와 2 개 개의 버튼을 동봉, 아래의 코드를 확인 : http://i.stack.imgur.com/wwBVw.jpg 를이 내 코드입니다 그리고 내가 CSS 또는 단지 포토샵에서이 작업을 수행 할 수 라인의 내부 효과를,

.button { 
 
\t position:relative; 
 
\t display: inline-block; 
 
\t padding: .5em 1em; 
 
\t font-size: 18px; 
 
\t font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
 
\t border: 1px solid rgba(122, 112, 82, 0.2); 
 
\t color: #877B5A; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t outline: none ; 
 
\t overflow: hidden; 
 
\t border-radius: 7px; 
 
} 
 
.button::after { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t z-index: -1; 
 
\t color #fffff; 
 
\t display: block; 
 
\t content: ''; 
 
\t width: 15em; 
 
\t height: 15em; 
 
\t border-radius: 50%; 
 
\t -webkit-transform: translate(-50%, -50%); 
 
\t transform: translate(-50%, -50%); 
 
\t transition: all 0s; 
 
} 
 
.button:hover::after { 
 
\t box-shadow: inset 0 0 0 10em rgba(242, 189, 99,.2); 
 

 
} 
 
.button:hover { 
 
    color: #000000; 
 
} 
 
.button1 { 
 
\t position:relative; 
 
\t display: inline-block; 
 
\t padding: .5em 1em; 
 
\t font-size: 18px; 
 
\t font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
 
\t border: 1px solid rgba(122, 112, 82, 0.2); 
 
\t color: #877B5A; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t outline: none ; 
 
\t overflow: hidden; 
 
\t border-radius: 7px; 
 
} 
 
.button1::after { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t z-index: -1; 
 
\t display: block; 
 
\t content: ''; 
 
\t width: 15em; 
 
\t height: 15em; 
 
\t transform: translate(-50%, -50%); 
 
\t transition: all 0s; 
 
} 
 
.button1:hover::after { 
 
\t 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>