代码之家  ›  专栏  ›  技术社区  ›  Vlad Rotaru

如何在按钮中心添加两行

  •  1
  • Vlad Rotaru  · 技术社区  · 2 年前

    有一个带边框的按钮:3px solid#E82929;什么技术可以用来添加额外的线条,比如照片中的线条?

    enter image description here

    .btn {
      position: relative;
      width: 362px;
      height: 71px;
      color: #FFFFFF;
      background-color: #000000;
      border: 3px solid #E82929;
      font-family: 'Flamenco';
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 25px;
      text-align: center;
    }
    <button class="btn">Забронировать столик</button>
    2 回复  |  直到 2 年前
        1
  •  4
  •   Temani Afif    2 年前

    使用梯度

    .btn {
      position: relative;
      padding: 20px 50px;
      color: #FFFFFF;
      border: 3px solid #E82929;
      font-family: 'Flamenco';
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 25px;
      text-align: center;
      
      background: linear-gradient(90deg, #E82929 40px,#0000 0 calc(100% - 40px), #E82929 0) 50%/100% 3px no-repeat;
      background-color: #000000;
    }
    <button class="btn">Забронировать столик</button>
        2
  •  3
  •   Stefan Jelner    2 年前

    您不需要额外的标记,因为它可以通过 ::before ::after 伪元素。

    假设你左边和右边的两条线的宽度为 30px 还有一个左右填充的 10px ,您可以将其添加到现有的CSS中:

    .btn {
      position: relative;
      width: 362px;
      height: 71px;
      color: #FFFFFF;
      background-color: #000000;
      border: 3px solid #E82929;
      font-family: 'Flamenco';
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 25px;
      text-align: center;
    }
    
    /* extra code comes here */
    .btn {
      padding: 0 40px; /* 30px line width + 10px padding */
    }
    
    .btn::before,
    .btn::after {
      background-color: #E82929; /* border color */
      content: ''; /* content is mandatory for the element to show up */
      height: 3px; /* 3px border width */
      position: absolute;
      top: 50%; /* 50% from the top */
      transform: translateY(-50%); /* half of its height back to the top */
      width: 30px; /* 30px line width */
    }
    
    .btn::before {
      left: 0;
    }
    
    .btn::after {
      right: 0;
    }
    <button class="btn">Забронировать столик</button>

    根据需要更改宽度和填充。

    它的作用:它增加了 ::之前 ::之后 左侧和右侧没有文本内容的伪元素,并将其垂直居中放置。

    如果您对细节有任何疑问,请随时提问。