如何在html/css中分隔按钮 [英] How to separate buttons in html/css

问题描述

我想将我的CSS代码重用于按钮和html代码，并制作另一个相同样式的按钮，但其中包含不同的文本.有没有办法为一个按钮重复使用css code/html并创建与上一个相同的另一个按钮?

I want to reuse my css code for my button and html code, and make another same style button but with different text in it. Is there a way to reuse the css code/html for a button and create another button that's the same as the previous one?

代码:

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 ，因为它不会执行任何操作.我将第一个按钮命名为关于我，但将第二个按钮命名为 Projects .但是，由于某种原因，它们都具有相同的名称.有没有办法解决这个问题?另外，其他任何东西都不应更改，因为它们仍应彼此对齐.

Even though I have different texts for each button, it still does not work. By the way, the css is what controls the text, and text is displayed in there. Ignore Show Me Attention in the HTML, as it does not do anything. I named the first button About Me but the second button Projects. However, they both have the same name for some reason. Is there a way to fix this? Also, nothing else should change as they should still be aligned beside each other.

推荐答案

通过CSS控制文本是非常糟糕的做法，尤其是对于诸如按钮之类的主要内容.

Controlling your text via CSS is a very bad practice especially for primary content like buttons.

您的文本正在显示，但是因为文本设置为透明，所以您看不到您的文本.那并不意味着它没有渲染.

Your text is showing but because the text is set to transparent you can't see your text. That doesn't mean it's not rendering.

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

You can use the same classes, you don't need btn1 or btn2 or need to work with pseudo elements to display text.

请参阅示例.

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>

这篇关于如何在html/css中分隔按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！