在按钮上动画块,而不是实际按钮

问题描述 投票:0回答:1

我正在尝试对按钮进行动画处理,但是该按钮顶部的块正在设置动画和样式,而不是实际的按钮。为什么要这样做,如何使它动画并设置实际按钮的样式?

.btn-area button{
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  transform-style: preserve-3d;
  position: relative;
  transition: .5s;  
  left: 16px;
  top: 33px;
}
.btn-area button:before{
  content: attr(title);
  position: absolute;
  top: 5px;
  left: 30px;
  padding: 10px 30px;
  background: #fff;
  color: #16A8C2;
  background: #1B1C1C;
  transition: .5s;
  transform: translateX(-100%) rotateY(90deg);
   transform-origin: right;
}
.btn-area button:after {
  content: attr(title);
  position: absolute;
  top: 5px;
  left: 30px;
  padding: 10px 30px;
  background: #16A8C2;
  color: #1B1C1C;
  transition: .5s;
  transform: translateX(0) rotateY(0);
  transform-origin: left;
}
.btn-area button:hover:before{
  transform: translateX(0) rotateY(0);
}
.btn-area button:hover:after{
  transform: translateX(100%) rotateY(90deg);
}    
<div class="form-text">
    <div class="btn-area">
        <button type="submit" value="Send">Submit</button>
    </div>
</div>
html css
1个回答
0
投票

之所以会这样,是因为您要定位:before:after伪元素。您需要定位button本身。

.btn-area button {
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  transform-style: preserve-3d;
  position: relative;
  transition: .5s;
  left: 16px;
  top: 33px;
}

.btn-area button:before {
  content: attr(title);
  position: absolute;
  top: 5px;
  left: 30px;
  padding: 10px 30px;
  background: #fff;
  color: #16A8C2;
  background: #1B1C1C;
  transition: .5s;
  transform: translateX(-100%) rotateY(90deg);
  transform-origin: right;
}

.btn-area button:after {
  content: attr(title);
  position: absolute;
  top: 5px;
  left: 30px;
  padding: 10px 30px;
  background: #16A8C2;
  color: #1B1C1C;
  transition: .5s;
  transform: translateX(0) rotateY(0);
  transform-origin: left;
}

.btn-area button:hover {
  transform: translateX(0) rotateY(0);
}

.btn-area button:hover {
  transform: translateX(100%) rotateY(90deg);
}
<div class="form-text">
  <div class="btn-area">
    <button type="submit" value="Send">Submit</button>
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.