Is it possible to create a border with a space in the middle of the top and bottom? I've attached an image to show what I'm referring to. Maybe using ::before / ::after is how to achieve this?
Just after some advice.
Is it possible to create a border with a space in the middle of the top and bottom? I've attached an image to show what I'm referring to. Maybe using ::before / ::after is how to achieve this?
Just after some advice.
button{
width:200px;
height:50px;
border:2px solid brown;
position:relative;
background:none;
}
button::before{
content:"";
width:25px;
height:calc(100% + 5.5px);
background-color:#fff;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
button span{
font-size:18px;
font-family: "Arial";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:3;
}
<button>
<span>Click Me</span>
</button>
You may also use gradient and a transparent border :
h1 {
/* draw the border */
border: solid 3px transparent;
background: linear-gradient(#fff, #fff) no-repeat, linear-gradient(to left, #cea87c 45%, #cea87c00 45%, #cea87c00 55%, #cea87c 55%);
/* make it shrink & center */
width:max-content;
margin:1em auto;
padding:0.25em 1em;
}
<h1>All Projects</h1>
<h1>All Projects really ?</h1>
Yes you can achieve this by using ::after
& ::before
. just look at my snippet example and tell me if is that your answer or not?
.button.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
position: relative
}
.button {
background-color: #fff;
border: none;
color: 4CAF50;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button.button1::after {
content: "";
position: absolute;
background-color: white;
width: 5px;
height: 2px;
top: -2px;
right: 45%;
bottom: 0;
}
.button.button1::before {
content: "";
position: absolute;
background-color: white;
width: 5px;
height: 2px;
bottom: 2px;
right: 45%;
bottom: -2px;
}
<button class="button button1">Green</button>