如何将按钮添加到<div class =“”>

Question

如何在<div class="button">Click Me</div>？

中使用以下代码？

button {
    text-transform: uppercase;
}

我想将上面button {的无聊按钮转换为以下代码段：

＆＃13;

＆＃13;

$(function(){
  $(".fancy-button").mousedown(function(){
    $(this).bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
        $(this).removeClass('active');
    })
     $(this).addClass("active");
  });
});

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');

body, html {
  height: 100%;
}

body {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #fff;
}

.button {
  background: #e74c3c;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-family: Roboto;
  font-size: 1.9em;
  height: 65px;
  letter-spacing: .2px;
  line-height: 65px;
  text-align: center;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 150px;
}
.button:hover {
  background: #c0392b;
}
.button:active {
  box-shadow: inset 0px 2px 8px -1px #d7143b;
}

.fancy-button {
  margin: auto;
  position: relative;
}

.frills, .frills:after, .frills:before {
  position: absolute;
  background: #e74c3c;
  border-radius: 4px;
  height: 8px;
}

.frills:after, .frills:before {
  content: "";
  display: block;
}

.frills:before {
  bottom: 45px;
}

.frills:after {
  top: 45px;
}

.left-frills {
  right: 164px;
  top: 28.5px;
}
.active .left-frills {
  -webkit-animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out;
          animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out;
}
.left-frills:before, .left-frills:after {
  left: 15px;
}
.active .left-frills:before {
  -webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;
          animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;
}
.active .left-frills:after {
  -webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;
          animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;
}

.right-frills {
  left: 164px;
  top: 28.5px;
}
.active .right-frills {
  -webkit-animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out;
          animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out;
}
.right-frills:before, .right-frills:after {
  right: 15px;
}
.active .right-frills:before {
  -webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;
          animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;
}
.active .right-frills:after {
  -webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;
          animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;
}

.left-frills:before, .right-frills:after {
  -webkit-transform: rotate(34deg);
          transform: rotate(34deg);
}

.left-frills:after, .right-frills:before {
  -webkit-transform: rotate(-34deg);
          transform: rotate(-34deg);
}

@-webkit-keyframes move-left {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  65% {
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
  100% {
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
}

@keyframes move-left {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  65% {
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
  100% {
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
}
@-webkit-keyframes move-right {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  65% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
  }
  100% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
  }
}
@keyframes move-right {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  65% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
  }
  100% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
  }
}
@-webkit-keyframes width-to-zero {
  0% {
    width: 38px;
  }
  100% {
    width: 8px;
  }
}
@keyframes width-to-zero {
  0% {
    width: 38px;
  }
  100% {
    width: 8px;
  }
}
@-webkit-keyframes move-up {
  100% {
    bottom: 69.75px;
  }
}
@keyframes move-up {
  100% {
    bottom: 69.75px;
  }
}
@-webkit-keyframes move-down {
  100% {
    top: 69.75px;
  }
}
@keyframes move-down {
  100% {
    top: 69.75px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fancy-button">
  <div class="left-frills frills"></div>
  <div class="button">Ta Da!</div>
  <div class="right-frills frills"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我成功地从上面的CodePen链接添加了CSS，Html和脚本，但仅作为按钮的模型而没有与button {的连接。我希望将CodePen按钮的样式和脚本转移到我的button {（我已经实现的按钮已经有链接的功能，我只想要这个新的外观和动画）

Answer 1

HTML为<div class="button">Click Me</div> CSS为button {text-transform: uppercase;} 目前它们没有连接，因为您的标记是 div .button （带有类选择器的div元素是按钮），但您的样式适用于 {{ 3}} 元素。

所以你有两个选择

1. 将button{...}更改为.button{...}
2. 或将<div class="button">Click Me</div>更改为<button>Click Me</button>

对不起你的问题对我来说有点难以理解，但我想第一个选择就是你的 - 如果我做对了。

更改CSS |已将button更改为.button

＆＃13;
＆＃13;
.button {
  text-transform: uppercase;
}
＆＃13;
<div class="button">Click Me</div>
＆＃13;
＆＃13;
＆＃13;

更改HTML |已将<div class="button">更改为<button>

＆＃13;
＆＃13;
button {
  text-transform: uppercase;
}
＆＃13;
<button>Click Me</button>
＆＃13;
＆＃13;
＆＃13;

如果您需要任何进一步的帮助，请随时发表评论。