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

Question

I have a dynamic width/height div with a border. Inside is an absolutely positioned button centered at the bottom that overlaps the parent div's border. I'd like to make it seem like the border stops a few pixels before overlapping the button. One requirement is to keep everything dynamic as in, if the button grows in width or the box grows it won't break the style.

Here's what I've 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> 

Answer 1

Use a flexbox with before and after for the bottom border. In this way when the button grows, the borders will shrink:

 *, *: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> 

Answer 2

Create fake border with position attribute (some hacky approach)

 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> 

---

Description

1. Put overall wrapper as absolute, with overflow: hidden to hide bottom border that is too long. Apply bottom padding for button not to hide when moving it down.
2. Put some wrapper around button and place it at the bottom of parent.
3. Button wrapper has text-align: center for button to stay at center with dynamic content.
4. Use :before and :after with left/right: 1XX% to move it out of button.
5. Pseudo elements width should be more than parent wrapper width ever become ( wrapper-max-ever-width / 2 )

Answer 3

Please try the following:

 *, *: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> 

Answer 4

May this help you! click run code snippet to show the example

 .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>