我正在尝试对按钮进行动画处理,但是该按钮顶部的块正在设置动画和样式,而不是实际的按钮。为什么要这样做,如何使它动画并设置实际按钮的样式?
.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>
之所以会这样,是因为您要定位: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>