Button with gradient border and highlights at corners - css

Question

I need to create button with gradient border and highlights at corners.
Im try do this with pseudoelements, but i have only 2/4 border sides. Thanks in advance!
.fly--btn {
background: rgba(0, 0, 0, 0.5);
color: #A9A9A9;
margin-top: 12%;
position: relative;
border: none;
padding: 5px 20px;
}
.fly--btn:before,
.fly--btn:after {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
}
.fly--btn:before {
top: -1px;
width: 1px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#101f2d), to(#3263a3));
background-image: -webkit-linear-gradient(#101f2d, #3263a3);
background-image: -o-linear-gradient(#101f2d, #3263a3);
background-image: linear-gradient(#101f2d, #3263a3);
}
.fly--btn:after {
right: -1px;
height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(#3263a3), to(#101f2d));
background-image: -webkit-linear-gradient(left, #3263a3, #101f2d);
background-image: -o-linear-gradient(left, #3263a3, #101f2d);
background-image: linear-gradient(left, #3263a3, #101f2d);
}
<button type="button" class="fly--btn">
Начать путешествие
</button>

Answer 1

Here is and idea with gradient and multiple background:
.box {
display:inline-block;
padding:10px;
color:#fff;
font-size:30px;
background:
linear-gradient(#fff,#fff) top right/10px 2px,
linear-gradient(#fff,#fff) top right/2px 10px,
linear-gradient(#fff,#fff) bottom left/10px 2px,
linear-gradient(#fff,#fff) bottom left/2px 10px,
linear-gradient(to right,transparent, #3263a3) top/100% 2px,
linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
linear-gradient(to top,transparent, #3263a3) right/2px 100%;
background-repeat:no-repeat;
}
body {
background:#222;
}
<div class="box"> some text here </div>
And if you want the shadow in the corner you can try pseudo element and drop-shadow like this:
.box {
display:inline-block;
padding:10px;
color:#fff;
font-size:30px;
background:
linear-gradient(to right,transparent, #3263a3) top/100% 2px,
linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
linear-gradient(to top,transparent, #3263a3) right/2px 100%;
background-repeat:no-repeat;
position:relative;
}
.box:before,
.box:after {
content:"";
position:absolute;
width:10px;
height:10px;
border:2px solid #fff;
filter:drop-shadow(0 0 3px);
}
.box:before {
top:0;
right:0;
border-left:none;
border-bottom:none;
}
.box:after {
bottom:0;
left:0;
border-right:none;
border-top:none;
}
body {
background:#222;
}
<div class="box"> some text here </div>