Прошу помочь. Я скачал анимированную красивую CSS кнопку и хочу добавить ее в модуль обратной связи и в другие модули и плагины, которые имеют стандартную кнопку, но не знаю как ее установить.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,400);
*, *:before, *:after {
margin:0;
padding:0;
box-sizing:border-box;
}
HTML,
body {
width:100%;
height:100%;
}
body {
overflow-x:hidden;
text-align:center;
background:#2980b9;
font-family: 'Open Sans', sans-serif;
}
.mail-btn {
position:relative;
top:35%;
display:inline-block;
padding:0.5rem 1rem;
border:2px solid rgba(255,255,255,0.5);
background:none;
outline:none;
-webkit-appearance: none;
font-size:2rem;
color:rgba(255,255,255,1);
text-decoration:none;
text-transform:uppercase;
letter-spacing:0.5rem;
text-indent:0.5rem;
cursor:pointer;
transition:
color 1.5s .5s,
border 3s 1s;
}
.mail-btn:before,
.mail-btn:after {
content:'';
position:absolute;
opacity:0;
backface-visibility:visible;
transform-style:preserve-3d;
perspective:400px;
transform-origin:50% -50%;
transform:rotateX(360deg) rotateY(0) translateX(-50%) translateY(0) scale(0.2);
transition:all 0.5s;
}
.mail-btn:before {
top:5px;
left:50%;
height:3rem;
background:white;
border-top:2rem solid #2980b9;
border-right:3rem solid transparent;
border-left:3rem solid transparent;
}
.mail-btn:after {
top:0;
left:50%;
border-top:2rem solid white;
border-right:3rem solid transparent;
border-left:3rem solid transparent;
}
.mail-btn:hover {
color:rgba(255,255,255,0);
border:2px solid rgba(255,255,255,0);
transition:
color .25s,
border .25s;
}
.mail-btn:hover:before,
.mail-btn:hover:after {
opacity:1;
transform:rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
}
.fly {
color:rgba(255,255,255,0);
border:2px solid rgba(255,255,255,0);
animation:sended 4s 0.8s forwards;
}
@keyframes sended {
0% {
height:2rem;
width:3.5rem;
border-top:0;
border-right:0;
border-bottom:10px solid white;
border-left:10px solid white;
opacity:0;
transform:rotate(-45deg) translateX(300%) translateY(-500%);
}
5% {
height:2rem;
width:3.5rem;
border-top:0;
border-right:0;
border-bottom:10px solid white;
border-left:10px solid white;
opacity:1;
transform:rotate(-45deg) translateX(0) translateY(0);
}
78% {
height:2rem;
width:3.5rem;
border-top:0;
border-right:0;
border-bottom:10px solid white;
border-left:10px solid white;
opacity:1;
transform:rotate(-45deg) translateX(0) translateY(0);
}
79% {
height:2rem;
width:3.5rem;
border-top:0;
border-right:0;
border-bottom:10px solid white;
border-left:10px solid white;
opacity:0;
transform:rotate(-45deg) translateX(0) translateY(0);
}
80% {
height:auto;
width:auto;
color:rgba(255,255,255,0);
border:2px solid rgba(255,255,255,0);
opacity:0;
transform:rotate(0) translateX(0) translateY(0);
}
100% {
height:auto;
width:auto;
color:rgba(255,255,255,1);
border:2px solid rgba(255,255,255,0.5);
opacity:1;
transform:rotate(0) translateX(0) translateY(0);
}
}
.fly:before,
.fly:after {animation:flyout .6s forwards;}
@keyframes flyout {
0% {
opacity:1;
transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
}
33% {
opacity:0.66;
transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
}
100% {
opacity:0;
transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
}
}
$(".mail-btn").on("click touchstart", function () {
$(this).addClass("fly");
that = this
setTimeout(function() {
$(that).removeClass("fly");
}, 5400)
});
21.02.2022, 10:56:18