Как добавить кнопке треугольные выступы по бокам

Question

В макете, который я сейчас верстаю, присутствует такая кнопка

но я не имею ни малейшего понятия, как добиться такой формы. Это делается с помощью псевдоэлементов или надо отдельно прописывать боковые Borders?

Пока что у меня такой код для кнопки:

.show-more {
    margin-top: 40px;
    color: #BB8C5F;
    font-size: 30px;
    font-weight: 300;
    border: 2px solid #BB8C5F;
    padding: 20px 70px;
    background-color: transparent;
    font-family: "oswald";
    margin-bottom: 100px;
}

<div class="main-content">
 <button class="show-more">Показать ещё</button>
</div>

Буду признательна за помощь и разъяснение <3

Answer 1

Если вы только начинаете изучать вёрстку, может быть начнете изучать и svg тоже, ведь этот язык, именно предназначен для вёрстки графических элементов. Понадобится только изучить азы работы с векторным редактором и любые простые и не очень графические фигуры будут вылетать как из пулемета.

Сравните код svg с CSS, всего две строчки и вы получаете адаптивное, кросс браузерное решение!

<svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 50 22" id="svg4">
  <path d="M5 1h40v6l4.1 3.4L45 14V21H5v-6.8L1 11 5 7Z" id="rect2" fill="none" stroke="#BB8C60"/>
    <text x="7" y="12" fill="#BB8C60" font-size="6px" >Показать ещё </text>
</svg>

Регулировку размеров можно производить с помощью width="50%" height="50%" в шапке SVG

Answer 2

Шаг #1.

Загружаете в векторный редактор, например Inkscape растровую картинку с которой нужно сделать pixel Perfect векторного изображения

Код, который ниже загружаете в векторный редактор:

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="500" height="250" viewBox="0 0 500 250" >  
<image xlink:href="https://i.stack.imgur.com/in9j9.png" width="100%" height="100%" />
</svg>

Шаг #2. С помощью инструмента "Рисовать кривые Безье" наносите узловые точки по контуру

Шаг #3. Сохраняете файл в формате *.SVG и оптимизируете его с помощью SVGOMG

Шаг #4. Добавляете строку для текста

    <text x="50%" y="55%" text-anchor="middle" font-size="56px"
      font-family="sans-serif" fill="#BB8C60">Показать ещё</text>

Рамка готова!

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4" width="25%" height="25%" viewBox="0 0 500 250">
   <path d="M31.8 65.4h427.9v46.5l23.2 13.4-23.2 13.5v47.6h-428v-48.9L8.7 125.3l23.2-17.1Z" id="path825" fill="none" stroke="#BB8C60" stroke-width="4" /> 
    <text x="50%" y="55%" text-anchor="middle" font-size="56px" font-family="sans-serif" fill="#BB8C60">Показать ещё</text>
</svg>

Пример анимации выступов

Добавляем анимацию атрибута "d" path контура

Берется два path: первый path начального положения - это прямоугольник и второй path, который c выступами.
Смысл анимации заключается в переходе от одного контура к другому.

Анимация начнется после наведения и увода курсора с контура фигуры

#txt {
font-size:56px;
font-family:sans-serif;
fill:#BB8C60;
text-anchor:middle;
pointer-events:none;
}

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="50%" height="50%" viewBox="0 0 500 250">
 
  <path id="start" fill="transparent" stroke="#BB8C60" stroke-width="4" d="M31.8 65.4h427.9v46.5l-.8 13.4.8 13.5v47.6h-428v-48.9l-1.1-12.2 1.2-17.1z" >
    <animate attributeName="d"
      begin="start.mouseenter"
      dur="0.5s"
      fill="freeze"
      values=" 
          M31.8 65.4h427.9v46.5l-.8 13.4.8 13.5v47.6h-428v-48.9l-1.1-12.2 1.2-17.1z;
          M31.8 65.4h427.9v46.5l23.2 13.4-23.2 13.5v47.6h-428v-48.9L8.7 125.3l23.2-17.1Z"
          /> 
     <animate attributeName="d"
      begin="start.mouseleave"
      dur="0.5s"
      fill="freeze"
      values=" 
          M31.8 65.4h427.9v46.5l23.2 13.4-23.2 13.5v47.6h-428v-48.9L8.7 125.3l23.2-17.1Z;
          M31.8 65.4h427.9v46.5l-.8 13.4.8 13.5v47.6h-428v-48.9l-1.1-12.2 1.2-17.1z"
          
          />      
   </path> 
    <text id="txt" x="50%" y="55%">Показать ещё</text>
</svg>

БЛОГ НА HUSL

Как добавить кнопке треугольные выступы по бокам

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

Пример анимации выступов