Javascript 如何在html/css中分离按钮_Javascript_Html_Jquery_Css_Animation

Javascript 如何在html/css中分离按钮

javascript html jquery css animation

Javascript 如何在html/css中分离按钮,javascript,html,jquery,css,animation,Javascript,Html,Jquery,Css,Animation,我想为我的按钮和html代码重用css代码，并制作另一个样式相同但包含不同文本的按钮。有没有一种方法可以重用按钮的css代码/html，并创建与前一个按钮相同的另一个按钮代码：正文{ 背景：黑色； } .wrapper{display:flex；} #容器{ 显示器：flex；对齐项目：居中；证明内容：中心；利润率：0.100px； } .按钮{ 边缘顶部：58px；对齐内容：左对齐； --y:-25； --x:0； --轮换：0； --速度：2； --txt：“关于我”； --填

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

代码：

正文{
背景：黑色；
}
.wrapper{display:flex；}
#容器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
利润率：0.100px；
}
.按钮{
边缘顶部：58px；
对齐内容：左对齐；
--y:-25；
--x:0；
--轮换：0；
--速度：2；
--txt：“关于我”；
--填充：1雷姆1.25雷姆；
光标：指针；
填充：var（--填充）；
边框：4px实心；
边框颜色：#00fffe；
颜色：透明；
字体大小：粗体；
字体大小：1.25rem；
过渡：背景0.1s轻松；
背景：hsl（灰色），100%，50%；
动画名称：流和抖动；
-webkit动画持续时间：计算（var（--速度）*1s）；
动画持续时间：计算（var（--速度）*1s）；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画计时功能：轻松输入输出；
动画计时功能：轻松进出；
}
.按钮：之后{
内容：var（--txt）；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
填充：var（--填充）；
颜色：#fff；
}
.按钮：悬停{
背景：hsl（灰色），100%，40%；
--速度：0.1；
--轮换：-1；
--y:-1；
--x:1；
}
@-webkit关键帧流动和抖动{
0%, 100% {
变换：平移（计算（变量（--x）*-1%），0）旋转（计算（变量（--旋转）*-1deg））；
}
50% {
变换：平移（计算（变量（-x）*1%）、计算（变量（-y）*1%）旋转（计算（变量（-旋转）*1deg））；
}
}
/*第二个按钮*/
#集装箱2{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.按钮1{
边缘顶部：58px；
对齐内容：左对齐；
--y:-25；
--x:0；
--轮换：0；
--速度：2；
--txt：“项目”；
--填充：1雷姆1.25雷姆；
光标：指针；
填充：var（--填充）；
边框：4px实心；
边框颜色：#00fffe；
颜色：透明；
字体大小：粗体；
字体大小：1.25rem；
过渡：背景0.1s轻松；
背景：hsl（灰色），100%，50%；
动画名称：流和抖动；
-webkit动画持续时间：计算（var（--速度）*1s）；
动画持续时间：计算（var（--速度）*1s）；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画计时功能：轻松输入输出；
动画计时功能：轻松进出；
}
.按钮1：1后{
内容：var（--txt）；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
填充：var（--填充）；
颜色：#fff；
}
.按钮1：悬停1{
背景：hsl（灰色），100%，40%；
--速度：0.1；
--轮换：-1；
--y:-1；
--x:1；
}
@-webkit关键帧流动和抖动{
0%, 100% {
变换：平移（计算（变量（--x）*-1%），0）旋转（计算（变量（--旋转）*-1deg））；
}
50% {
变换：平移（计算（变量（-x）*1%）、计算（变量（-y）*1%）旋转（计算（变量（-旋转）*1deg））；
}
}


让我注意
让我注意

您可以向新按钮添加特定类，如

btn1

和

btn2

，而不是复制所有css代码。将class

按钮保留在所有将保持不变的内容上。其中btn1
和btn2
用于更改文本
.btn1 {--txt: "About Me";}
.btn2 {--txt: "Projects";}

以下是您在JSFIDLE上更新和使用的代码：

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));
      }
    }

<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>

HTML:
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));
      }
    }

<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>


让我注意
让我注意
通过CSS控制文本是一种非常糟糕的做法，尤其是对于按钮等主要内容
您的文本正在显示，但由于文本设置为透明，您无法看到文本。这并不意味着它不渲染
您可以使用相同的类，不需要btn1或btn2，也不需要使用伪元素来显示文本
参见示例

正文{
背景：黑色；
}
.wrapper{display:flex；}
#容器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
利润率：0.100px；
}
.按钮{
边缘顶部：58px；
对齐内容：左对齐；
--y:-25；
--x:0；
--轮换：0；
--速度：2；
/*删除：--txt:“关于我”*/
--填充：1雷姆1.25雷姆；
光标：指针；
填充：var（--填充）；
边框：4px实心；
边框颜色：#00fffe；
颜色：白色；/*已更改*/
字体大小：粗体；
字体大小：1.25rem；
过渡：背景0.1s轻松；
背景：hsl（灰色），100%，50%；
动画名称：流和抖动；
-webkit动画持续时间：计算（var（--速度）*1s）；
动画持续时间：计算（var（--速度）*1s）；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画计时功能：轻松输入输出；
动画计时功能：轻松进出；
}
/*除去
.按钮：之后{
内容：var（--txt）；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
填充：var（--填充）；
颜色：#fff；
}
*/
.按钮：悬停{
背景：hsl（灰色），100%，40%；
--速度：0.1；
--轮换：-1；
--y:-1；
--x:1；
}
@-webkit关键帧流动和抖动{
0%, 100% {
转换：转换（计算值（--x）*-1