Button with partial border on top and bottom - html

Question

Hi all,
I would like to insert a <button> in my code that has a gap in border-top and border-bottom. I have seen some examples where it is possible to remove a part with it, but it's not exactly what I am looking for. Do you have an idea on how to get something like the above mentioned picture?
Thanks in advance for your replies!
EDIT:
I add more information: the best is that the background of the button is transparent and that the border-size is customisable.

Answer 1

Use pseudo elements
.brd {
font-size: 30px;
padding: 4px 20px;
position: relative;
border: none;
background-color: white;
}
.brd:before,
.brd:after {
content: ' ';
position: absolute;
border: 1px solid black;
top: 0;
bottom: 0;
width: 10px;
}
.brd:before {
border-right: 0;
left: 0;
}
.brd:after {
border-left: 0;
right: 0;
}
<span class="brd">Title</span>
<button class="brd">Title</button>

Answer 2

Another possible solution is to use gradient as border-image. Look at the snippet below
.box{
display:inline-block;
margin: auto;
padding: 10px;
border: 3px solid transparent;
-moz-border-image: -moz-linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
-webkit-border-image: -webkit-linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
border-image: linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
border-image-slice: 1;
}
<div class="box" >TITLE HERE</div>
If you want the top and bottom border parts to be exactly X pixels, you can change the percents with pixels like this:
border-image: linear-gradient(to right, #aaa 20px, #fff 20px, #fff calc(100% - 20px), #aaa calc(100% - 20px));

Answer 3

A simple way would be using a custom made image as the background of your button, tho it wouldn't scale well on different screen sizes.
Another idea would be to have a div underneath with a normal border, and then your smaller button on top of it, with the same height and a white border, so as to hide the top and bottom part.

Answer 4

I've created a JSFiddle for you: enter link description here
HTML:
<div class="back-with-border">
<div class="front-no-border">
Title Here
</div>
</div>
CSS:
.back-with-border{
border:1px solid gray;
width:200px;
height:100px;
position: relative;
}
.front-no-border{
display:flex;
justify-content:center;
align-items:center;
border:0px;
background-color:white;
position: absolute;
width:110px;
height:110px;
top:-1px;
left:45px
}

Answer 5

Check this [JSFiddle][1], hope this will solve your problem
body {
background-color: white;
}
.parent {
border: 1px solid black;
width: 200px;
height: 100px;
position: relative;
background-color: white;
}
.child {
display: flex;
justify-content: center;
align-items: center;
border: 0px;
background-color: white;
position: absolute;
width: 150px;
height: 103px;
top: -1px;
left: 25px
}
<div class="parent">
<div class="child">
Write your text here
</div>
</div>
[1]: https://jsfiddle.net/anshul24mehta/eocst0uv/3/