menu bar effect between the lines - css

Question

how can I make this effect of the inner side of the lines?This is the menu bar I am trying to make: http://i.stack.imgur.com/Mvuer.jpg I cant do the effect between the lines. This is my code: https://jsfiddle.net/ivailo/3q6ej7cc/4/
.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:after {
content: "";
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(160, 160, 160, .7) 50%, rgba(0, 0, 0, 0) 100%);
display: block;
margin: 10px 0px;
}
.theborder:before {
content: "";
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(160, 160, 160, .7) 50%, rgba(0, 0, 0, 0) 100%);
display: block;
margin: 10px 0px;
}

Answer 1

Step 1: The inner glow
You can achieve this effect by using a variant of the curved drop-shadow trick. That trick is explained here:
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
But instead of putting the shadow behind, we can:
make it white
leave it in front
set overflow: hidden on the menu to hide the parts of the "shadow" we don't want to see.
This produces the interior glow effect that you want.
BODY {
background-color: tan;
}
.menu {
background-color: tan;
width: 500px;
height: 60px;
position: relative;
overflow: hidden;
}
.menu::before {
content: "";
position: absolute;
top: -50%;
bottom: 100%;
left: 10%;
right: 10%;
border-radius: 50% / 30%;
box-shadow: 0 0 50px rgba(255,255,255,0.8);
}
.menu::after {
content: "";
position: absolute;
top: 100%;
bottom: -50%;
left: 10%;
right: 10%;
border-radius: 50% / 30%;
box-shadow: 0 0 40px rgba(255,255,255,0.7);
}
<div class="menu">
</div>
You can see more clearly how it works if you remove the overflow: hidden from the menu rule.
Step 2: The fading top border
To make this we can just add a new <div> element at the top that is 1px height and has a CSS gradient background.
The final result:
BODY {
background-color: tan;
}
.menu {
background-color: tan;
width: 500px;
height: 60px;
position: relative;
overflow: hidden;
}
.menu::before {
content: "";
position: absolute;
top: -50%;
bottom: 100%;
left: 10%;
right: 10%;
border-radius: 50% / 30%;
box-shadow: 0 0 50px rgba(255,255,255,0.8);
}
.menu::after {
content: "";
position: absolute;
top: 100%;
bottom: -50%;
left: 10%;
right: 10%;
border-radius: 50% / 30%;
box-shadow: 0 0 40px rgba(255,255,255,0.7);
}
.topborder {
width: 100%;
height: 1px;
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 25%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0) 100%);
}
<div class="menu">
<div class="topborder"></div>
</div>
Note: in both of the above examples I have simplified things by just using the unprefixed CSS properties. These should work on the latest Chrome and FF at least. But if you need to support older browser versions, you should add the prefixed versions of the CSS properties as well.
For example for the gradients, you might want to add -moz-linear-gradient and -webkit-linear-gradient, plus the fallback filter gradients for older versions of IE.
See: full version of this gradient