How To Separate Buttons In Html/css

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 an

Solution 1:

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.

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

See example.

body{
background: black;
}

.wrapper { display: flex; }

#container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0100px;
    }
    .button {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      /* REMOVED: --txt: "About Me"; */--padding: 1rem1.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));
      }
    }

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

Solution 2:

Instead of duplicating all of your css code, you could add a specific class to your new buttons like btn1 and btn2. Leaving the class button on everything that will remain the same. Where btn1 and btn2 are to change the text.

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

Here is your code updated and working on 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: 0100px;
    }
    .button {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      --padding: 1rem1.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:

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