How can I make a button as if it has a transparent border / stroke?

Question

I have a dynamic width / height div with a border. Inside there is an absolutely positioned button with the center at the bottom, which overlaps the border of the parent div. I would like to make the border overlap a few pixels before overlaying the button. One of the requirements is to keep everything dynamic, as in, if the button grows wide or the field grows, it will not break the style.

Here is what I have tried so far:

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: url(https://static.pexels.com/photos/415949/pexels-photo-415949.jpeg) no-repeat top center/cover;
  font: normal 100% arial, sans-serif;
  color: #fff;
}

.box {
  max-width: 500px;
  margin: 0 auto;
  border: 6px solid #fff;
  text-align: center;
  position: relative;
  padding: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.link {
  display: inline-block;
  background: #000;
  padding: 10px 25px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  text-decoration: none;
}

h1 {
  margin-top: 0;
}

.box {
  border-bottom: 0;
}

.box:before,
.box:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 6px;
  background: #fff;
  right: 75%;
}

.box:after {
  right: 0;
  left: 75%;
}

<div class="box">
  <h1>Some Header</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
  <a class="link" href="#">A Link</a>
</div>

Run codeHide result

Answer 1

Use flexbox with before and after for the bottom border. Thus, when the button increases, the borders will decrease:

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: url(https://static.pexels.com/photos/415949/pexels-photo-415949.jpeg) no-repeat top center/cover;
  font: normal 100% arial, sans-serif;
  color: #fff;
}

.box {
  max-width: 500px;
  margin: 0 auto;
  border: 6px solid #fff;
  border-bottom: none;
  text-align: center;
  position: relative;
  padding: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.buttonWrapper {
  position: absolute;
  display: flex;
  bottom: 0;
  right: 0;
  left: 0;
  align-items: flex-end;
}

.buttonWrapper:before, .buttonWrapper:after {
  display: block;
  flex: 1;
  height: 6px;
  background: #fff;
  content: '';
}

.link {
  display: inline-block;
  background: #000;
  padding: 10px 25px;
  margin: 0 5px;
  color: #fff;
  text-decoration: none;
  transform: translateY(50%);
  align-item: middle;
}

h1 {
  margin-top: 0;
}

<div class="box">
  <h1>Some Header</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
  <div class="buttonWrapper">
    <a class="link" href="#">A very long Link</a>
  </div>
</div>

Run codeHide result

Answer 2

position ( )

body {
  background-color: #ddd;
}

.wrapper {
  overflow: hidden;
  width: 70%;
  height: 150px;
  padding-bottom: 10px;
}
.wrapper .block {
  border: 4px solid white;
  border-bottom: 0;
  position: relative;
  height: 100%;
}

.wrapper .button-wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 20px;
}
.wrapper button {
  border: none;
  background-color: black;
  color: white;
  display: inline-block;
  height: 20px;
  position: relative;
  bottom: -8px; 
}

.wrapper button:after,
.wrapper button:before {
  content: '';
  position: absolute;
  top: 8px;
  width: 1000px;
  height: 4px;
  background-color: white;
}

.wrapper button:after {
  right: 120%;
}

.wrapper button:before {
  left: 120%;
}

<div class="wrapper">
  <div class="block">
    <div class="button-wrapper">
      <button>Text</button>
    </div>
  </div>
</div>

Hide result

---

• , overflow: hidden, , . , .
• .
• text-align: center, .
• :before :after left/right: 1XX%, .
• , (wrapper-max-ever-width / 2)

Answer 3

:

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: url(https://static.pexels.com/photos/415949/pexels-photo-415949.jpeg) no-repeat top center/cover;
  font: normal 100% arial, sans-serif;
  color: #fff;
}

.box {
  max-width: 500px;
  margin: 0 auto;
  border: 6px solid #fff;
  text-align: center;
  position: relative;
  padding: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.link_wrap {
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 0;
  display: flex;
  align-items:center;
  transform: translateY(50%);
}

.link_wrap:before, .link_wrap:after {
  content: '';
  display: inline-block;
  flex: 1;
  height: 6px;
  background-color: #fff;
}

.link_wrap:before {
  margin-right: 10px;
}

.link_wrap:after {
  margin-left: 10px;
}

.link {
  display: inline-block;
  background: #000;
  padding: 10px 25px;
  top: 100%;
  left: 50%;
  color: #fff;
  text-decoration: none;
}

h1 {
  margin-top: 0;
}

.box {
  border-bottom: 0;
}

<div class="box">
	<h1>Some Header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
	<div class="link_wrap"><a class="link" href="#">A Link</a></div>
</div>

Hide result

Answer 4

! run code snippet,

.header { 
  height: 300px; width: 100%; background: yellow; 
  display: flex; align-items: center; justify-content: center;
}
.scrapbook-texts { margin: 0 20px; padding: 20px 0;}
.scrapbook { 
  border: solid white;
  border-width: 5px 5px 0 5px;
  position: relative;
}

.scrapbook-cta {
  position: absolute;
  bottom: 0;
  text-align: center;
  display: flex;
  width: 100%;
}
.scrapbook-cta::after,
.scrapbook-cta::before {
  border-bottom: 5px solid white;
  width: 100%;
  display: block;
  content: "";
  flex: 1 1 auto;
}
.scrapbook-cta::before {
}

.scrapbook-cta button {
  margin: 0 20px;
  flex: 1 0 auto;
  appearance: none;
  width: 50px;
  height: 20px;
  border: none;
  background: black;
  color: white;
}

<header class="header">
  <div class="scrapbook">
    
    <div class="scrapbook-texts">
      <h1>Some Header</h1>
      <h2>Lorem ipsum...</h2>
    </div>
    
    <div class="scrapbook-cta">
      <button>Link</button>
    </div>
  </div>
</header>

Hide result