如何在 html/css 中分隔按钮

Question

我想为我的按钮和 html 代码重用我的 css 代码，并制作另一个样式相同但带有不同文本的按钮。有没有办法重用一个按钮的 css 代码/html 并创建另一个与前一个相同的按钮？

代码：

body{
background: black;
}

.wrapper { display: flex; }

#container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 100px;
    }
    .button {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      --txt: "About Me";
      --padding: 1rem 1.25rem;
      cursor: pointer;
      padding: var(--padding);
      border: 4px solid;
      border-color: #00fffe;
      color: transparent;
      font-weight: bold;
      font-size: 1.25rem;
      transition: background 0.1s ease;
      background: hsl(var(--grey), 100%, 50%);
              animation-name: flow-and-shake;
      -webkit-animation-duration: calc(var(--speed) * 1s);
              animation-duration: calc(var(--speed) * 1s);
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
    }
    .button:after {
      content: var(--txt);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: var(--padding);
      color: #fff;
    }
    .button:hover {
      background: hsl(var(--grey), 100%, 40%);
      --speed: 0.1;
      --rotation: -1;
      --y: -1;
      --x: 1;
    }

    @-webkit-keyframes flow-and-shake {
      0%, 100% {
        transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
      }
      50% {
        transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
      }
    }

    /* second button */
    #container2 {
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
    .button1 {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      --txt: "Projects";
      --padding: 1rem 1.25rem;
      cursor: pointer;
      padding: var(--padding);
      border: 4px solid;
      border-color: #00fffe;
      color: transparent;
      font-weight: bold;
      font-size: 1.25rem;
      transition: background 0.1s ease;
      background: hsl(var(--grey), 100%, 50%);
              animation-name: flow-and-shake;
      -webkit-animation-duration: calc(var(--speed) * 1s);
              animation-duration: calc(var(--speed) * 1s);
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
    }
    .button1:after1 {
      content: var(--txt);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: var(--padding);
      color: #fff;
    }
    .button1:hover1 {
      background: hsl(var(--grey), 100%, 40%);
      --speed: 0.1;
      --rotation: -1;
      --y: -1;
      --x: 1;
    }

    @-webkit-keyframes flow-and-shake {
      0%, 100% {
        transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
      }
      50% {
        transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
      }
    }

<div id="container">
<div class="button__wrap">
  <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()" >Show me attention</button>
  </div>
<div class="button__wrap">
  <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()">Show me attention</button>
  <div class="button__shadow"></div>
</div>
</div>

即使我为每个按钮设置了不同的文本，它仍然不起作用。顺便说一句，css是控制文本的，文本显示在那里。忽略 HTML 中的 Show Me Attention，因为它不执行任何操作。我将第一个按钮命名为 About Me，但将第二个按钮命名为 Projects。但是，由于某种原因，它们都具有相同的名称。有没有办法来解决这个问题？此外，其他任何内容都不应更改，因为它们仍应彼此对齐。

Answer 1

通过 CSS 控制文本是一种非常糟糕的做法，尤其是对于按钮等主要内容。

您的文字正在显示，但由于文字设置为透明，您看不到您的文字。这并不意味着它没有渲染。

您可以使用相同的类，不需要 btn1 或 btn2 或使用伪元素来显示文本。

参见示例。

body{
background: black;
}

.wrapper { display: flex; }

#container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 100px;
    }
    .button {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      /* REMOVED: --txt: "About Me"; */
      --padding: 1rem 1.25rem;
      cursor: pointer;
      padding: var(--padding);
      border: 4px solid;
      border-color: #00fffe;
      color: white; /* changed */
      font-weight: bold;
      font-size: 1.25rem;
      transition: background 0.1s ease;
      background: hsl(var(--grey), 100%, 50%);
              animation-name: flow-and-shake;
      -webkit-animation-duration: calc(var(--speed) * 1s);
              animation-duration: calc(var(--speed) * 1s);
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
    }
   /* REMOVED
   .button:after {
      content: var(--txt);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: var(--padding);
      color: #fff;
    }
    */
    .button:hover {
      background: hsl(var(--grey), 100%, 40%);
      --speed: 0.1;
      --rotation: -1;
      --y: -1;
      --x: 1;
    }

    @-webkit-keyframes flow-and-shake {
      0%, 100% {
        transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
      }
      50% {
        transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
      }
    }

<div id="container">
<div class="button__wrap">
  <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()" >About me</button>
  </div>
<div class="button__wrap">
  <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()">My Projects</button>
  <div class="button__shadow"></div>
</div>
</div>

Answer 2

您可以将特定的类添加到新按钮中，而不是复制所有的 CSS 代码，例如 btn1 和 btn2。离开课程button 的所有内容都将保持不变。其中btn1 和btn2 是要改文字的。

.btn1 {--txt: "About Me";}
.btn2 {--txt: "Projects";}

这是您在 JSFiddle 上更新的代码：

https://jsfiddle.net/e54g2w9q/

CSS：

body{
background: black;
}

.wrapper { display: flex; }


.btn1 {--txt: "About Me";}
.btn2 {--txt: "Projects";}

#container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 100px;
    }
    .button {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      --padding: 1rem 1.25rem;
      cursor: pointer;
      padding: var(--padding);
      border: 4px solid;
      border-color: #00fffe;
      color: transparent;
      font-weight: bold;
      font-size: 1.25rem;
      transition: background 0.1s ease;
      background: hsl(var(--grey), 100%, 50%);
              animation-name: flow-and-shake;
      -webkit-animation-duration: calc(var(--speed) * 1s);
              animation-duration: calc(var(--speed) * 1s);
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
    }
    .button:after {
      content: var(--txt);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: var(--padding);
      color: #fff;
    }
    .button:hover {
      background: hsl(var(--grey), 100%, 40%);
      --speed: 0.1;
      --rotation: -1;
      --y: -1;
      --x: 1;
    }

    @-webkit-keyframes flow-and-shake {
      0%, 100% {
        transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
      }
      50% {
        transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
      }
    }

HTML：

<div id="container">
<div class="button__wrap">
  <button class="button btn1" style="--hue: 162.03381670949574" onclick="popUp_model()" >Show me attention</button>
  </div>
<div class="button__wrap">
  <button class="button btn2" style="--hue: 162.03381670949574" onclick="popUp_model()">Show me attention</button>
  <div class="button__shadow"></div>
</div>
</div>