Question

＆＃13;

*,
*::after,
*::before {
  box-sizing: border-box;
}
button {
  width: 250px;
  height: 70px;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 22px;
  border: 3px solid #28F2B3;
  color: #28F2B3;
  line-height: 64px;
  background: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 5px #222;
  border-radius: 70px;
  -webkit-animation: over 6s infinite;
  animation: over 6s infinite;
}
button:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #28F2B3;
  -webkit-animation: load 6s infinite;
  animation: load 6s infinite;
}
button:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-bottom: 3px solid;
  border-right: 3px solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  right: 45px;
  top: 18px;
  -webkit-animation: dwd 6s infinite;
  animation: dwd 6s infinite;
}
@-webkit-keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@-webkit-keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@-webkit-keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}
@keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}

＆＃13;

<button>Download</button>

＆＃13;

我想在个人项目中使用此动画按钮，但我遇到的问题是我的搜索按钮也与下载按钮具有相同的类，所以当我保存并打开页面时，下载按钮似乎重叠了搜索图标。我搜索谷歌，但没有找到一种方法来改变按钮的课程使用CSS，我不太了解jquery。所以，如果这里的任何人都可以帮助我解决这个问题，那么我们将非常感激。提前致谢！：）

Answer 1

对不起，但是根据上面的代码，<button>Download</button>没有课程。假设您可以访问HTML，则可以将其更改为<button class="downloadBtn">，然后通过将属性从button更改为button.downloadBtn来专门使用您的css进行定位。然后，您的其他<button>代码不应被定位。

所以，有一点背景：在HTML和CSS中，我们可以使用名为id和class属性的东西来定位特定元素。如上所示，当您拥有css时，它会认为您要定位每个HTML标记<button>的按钮。开箱即用，css无法知道您只想定位特定按钮。

我们在这种情况下所做的是利用我提到的属性。你可以做的是让你的下载按钮标签看起来像这样：

HTML

<button id="downloadBtn">Download</button>

然后，改变你的css看起来像这样：

<强> CSS

*,
*::after,
*::before {
  box-sizing: border-box;
}
button#downloadBtn {
  width: 250px;
  height: 70px;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 22px;
  border: 3px solid #28F2B3;
  color: #28F2B3;
  line-height: 64px;
  background: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 5px #222;
  border-radius: 70px;
  -webkit-animation: over 6s infinite;
  animation: over 6s infinite;
}
button#downloadBtn:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #28F2B3;
  -webkit-animation: load 6s infinite;
  animation: load 6s infinite;
}
button#downloadBtn:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-bottom: 3px solid;
  border-right: 3px solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  right: 45px;
  top: 18px;
  -webkit-animation: dwd 6s infinite;
  animation: dwd 6s infinite;
}
@-webkit-keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@-webkit-keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@-webkit-keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}
@keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}

这样，用于制作下载按钮的css看起来就像你想要的那样只是真正针对下载按钮而不是所有按钮。我们可以在这里做很多不同的观点，但总的来说，你可能想看看this article on css syntax

Answer 2

您可以为它们提供不同的类别：

import {Menubar,MenuItem} from 'primeng/primeng';

*,
*::after,
*::before {
  box-sizing: border-box;
}
button.download-button {
  width: 250px;
  height: 70px;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 22px;
  border: 3px solid #28F2B3;
  color: #28F2B3;
  line-height: 64px;
  background: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 5px #222;
  border-radius: 70px;
  -webkit-animation: over 6s infinite;
  animation: over 6s infinite;
}
button.download-button:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #28F2B3;
  -webkit-animation: load 6s infinite;
  animation: load 6s infinite;
}
button.download-button:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-bottom: 3px solid;
  border-right: 3px solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  right: 45px;
  top: 18px;
  -webkit-animation: dwd 6s infinite;
  animation: dwd 6s infinite;
}
@-webkit-keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@-webkit-keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@-webkit-keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}
@keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}

如何使用css或jquery向button属性添加类

2 个答案: