Как сверстать карточку

Question

Не получается сверстать область там где button. Как сделать, чтобы справа и слева от button заканчивались линии с зазором?

#card {
    max-width: 540px;
    border: 1px solid #b1b1b1b1;
    color: #000;
    text-align: center;
    padding: 40px 5rem 50px 4rem;
}

#card h1 {
    font-size: 2.5em;
}

#card p {
    font-size: 1em;
}

.btn {
    color: #000;
    border: 3px solid #000;
    padding: 0.5rem 2rem;
}

               <div id="card">
                    <h1> The Best Services </h1>
                    <p>
                       We provide the best services in the world We provide the best services
                       in the world We provide the best services in the world
                    </p>
                    <div class="btn">
                        Hire us
                    </div>
                </div>

Answer 1

Если фон однотонный, то можно воспользоваться костылем с outline

#card {
  max-width: 540px;
  border: 1px solid #b1b1b1b1;
  color: #000;
  text-align: center;
  padding: 40px 5rem 50px 4rem;
  position: relative;
}

#card h1 {
  font-size: 2.5em;
}

#card p {
  font-size: 1em;
}

.btn {
  color: #000;
  outline: 10px solid #fff;
  padding: 0.5rem 2rem;
  position: absolute;
  bottom: -20px;
  background: #fff;
  width: 200px;
  left: 50%;
  margin: 0 0 0 -100px;
  box-sizing: border-box;
  border: 3px solid #000;
}

<div id="card">
  <h1> The Best Services </h1>
  <p>
    We provide the best services in the world We provide the best services in the world We provide the best services in the world
  </p>
  <div class="btn">
    Hire us
  </div>
</div>

Answer 2

на скорую руку

body {
  background-color: #333;
}

.block {
  position: relative;
  width: 500px;
  height: 300px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

.block::before,
.block::after {
  content: '';
  width: 180px;
  height: 2px;
  position: absolute;
  bottom: 0;
  background-color: #fff;
}

.block::before {
  left: 0;
}

.block::after {
  right: 0;
}

.btn {
  position: absolute;
  bottom: -27px;
  border: 3px solid #fff;
  padding: 15px;
  left: 50%;
  transform: translateX(-50%);
}

<div class="block">
  <div class="btn">Button</div>
</div>

Answer 3

SVG решение

Внешняя рамка с разрывами около кнопки реализуется с помощью атрибутов stroke-dasharray и stroke-dashoffset

stroke-dasharray:1580,120;
stroke-dashoffset:530;

#rect1 {
fill: none; 
stroke: white;
stroke-width:2;
stroke-dasharray:1580,120;
stroke-dashoffset:530;
}
#rect2 {
fill: none; 
stroke: white;
stroke-width:2;
}

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="400px" viewBox="0 0  600 400" preserveAspectRatio="xMidYMid meet" style="border:1px solid;" >
<rect width="100%" height="100%" fill="#151515" />
<rect id="rect1" x="30" y="30" width="540" height="300" /> 
  
 <rect id="track" x="250" y="310" width="100" height="40" style="fill: none; stroke: grey;"/>
<rect id="rect2" x="250" y="310" width="100" height="40" />
 <text x="100" y="160" font-size="48px" fill="white" font-weight="600" font-family="sans-serif">The Best Services</text> 
 <text x="60" y="220" font-size="16px" fill="white" font-weight="400" font-family="sans-serif">
   <tspan>We provide the best services in the world We provide the best services</tspan>
    <tspan x="110" y="245">in the world We provide the best services in the world</tspan> 
</text> 
 <text x="270" y="335" font-size="18px" fill="white" font-weight="600" font-family="sans-serif">Button</text> 

</svg>

Вариант с анимацией внешней рамки карты и обводки кнопки

Анимация линий идёт из одной общей точки двумя отрезками одновременно

<rect id="rect1" x="30" y="30" width="540" height="300" > 
  <animate id="an_rect" attributeName="stroke-dasharray" begin="svg1.click"
   dur="4s" values="0,800 0,800; 0,0,1580,120" fill="freeze" />
</rect>

Для начала анимации кликните по любому месту внутри прямоугольника

#rect1 {
fill: none; 
stroke: white;
stroke-width:2;
stroke-dasharray:0,800 0,800;
stroke-dashoffset:530;
}
#rect2 {
fill: none; 
stroke: white;
stroke-width:2;
stroke-dasharray:0,140 0,140;
stroke-dashoffset:90;
}

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="400px" viewBox="0 0  600 400" preserveAspectRatio="xMidYMid meet" style="border:1px solid;" >
<rect width="100%" height="100%" fill="#151515" />
<rect id="rect1" x="30" y="30" width="540" height="300" > 
 
 <animate id="an_rect" attributeName="stroke-dasharray" begin="svg1.click" dur="4s" values="0,800 0,800; 0,0,1580,120" fill="freeze" />
 </rect>  
 <rect id="track" x="250" y="310" width="100" height="40" style="fill: none; stroke: grey;"/>
<rect id="rect2" x="250" y="310" width="100" height="40" >
  <animate id="an_button" attributeName="stroke-dasharray" begin="an_rect.end" dur="2s" values="0,140 0,140; 0,0,280,0" fill="freeze" />
</rect>  
<text x="100" y="160" font-size="48px" fill="white" font-weight="600" font-family="sans-serif">The Best Services</text> 
 <text x="60" y="220" font-size="16px" fill="white" font-weight="400" font-family="sans-serif">
   <tspan>We provide the best services in the world We provide the best services</tspan>
    <tspan x="110" y="245">in the world We provide the best services in the world</tspan> 
</text> 
 <text x="270" y="335" font-size="18px" fill="white" font-weight="600" font-family="sans-serif">Button</text> 

</svg>

БЛОГ НА HUSL

Как сверстать карточку

Ответы (3 шт):

SVG решение