3.3K views
CSSAdd prefixes
1.wrapper { 2 perspective: 500px; 3 transform: rotatex(10deg); 4 animation: rotateAngle 6s linear infinite; 5 margin: auto; 6 width: auto; 7} 8 9button { 10 display: block; 11 position: relative; 12 margin: 0.5em 0; 13 padding: 0.8em 2.2em; 14 cursor: pointer; 15 background: #FFFFFF; 16 border: none; 17 border-radius: 0.4em; 18 text-transform: uppercase; 19 font-size: 19px; 20 font-family: "Work Sans", sans-serif; 21 font-weight: 500; 22 letter-spacing: 0.04em; 23 mix-blend-mode: color-dodge; 24 perspective: 500px; 25 transform-style: preserve-3d; 26} 27 28button:before, button:after { 29 --z: 0px; 30 position: absolute; 31 top: 0; 32 left: 0; 33 display: block; 34 content: ""; 35 width: 100%; 36 height: 100%; 37 opacity: 0; 38 mix-blend-mode: inherit; 39 border-radius: inherit; 40 transform-style: preserve-3d; 41 transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px)); 42} 43 44button span { 45 mix-blend-mode: none; 46 display: block; 47} 48 49button:after { 50 background-color: #5D00FF; 51} 52 53button:before { 54 background-color: #FF1731; 55} 56 57button:hover { 58 background-color: #FFF65B; 59 transition: background 0.3s 0.1s; 60} 61 62button:hover:before { 63 --z: 0.04; 64 animation: translateWobble 2.2s ease forwards; 65} 66 67button:hover:after { 68 --z: -0.06; 69 animation: translateWobble 2.2s ease forwards; 70} 71 72@keyframes rotateAngle { 73 0% { 74 transform: rotateY(0deg) rotateX(10deg); 75 -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); 76 animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); 77 } 78 79 25% { 80 transform: rotateY(20deg) rotateX(10deg); 81 } 82 83 50% { 84 transform: rotateY(0deg) rotateX(10deg); 85 -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); 86 animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); 87 } 88 89 75% { 90 transform: rotateY(-20deg) rotateX(10deg); 91 } 92 93 100% { 94 transform: rotateY(0deg) rotateX(10deg); 95 } 96} 97 98@keyframes translateWobble { 99 0% { 100 opacity: 0; 101 transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px)); 102 } 103 104 16% { 105 transform: translate3d(calc(var(--z) * 160px), calc(var(--z) * 160px), calc(var(--z) * 160px)); 106 } 107 108 28% { 109 opacity: 1; 110 transform: translate3d(calc(var(--z) * 70px), calc(var(--z) * 70px), calc(var(--z) * 70px)); 111 } 112 113 44% { 114 transform: translate3d(calc(var(--z) * 130px), calc(var(--z) * 130px), calc(var(--z) * 130px)); 115 } 116 117 59% { 118 transform: translate3d(calc(var(--z) * 85px), calc(var(--z) * 85px), calc(var(--z) * 85px)); 119 } 120 121 73% { 122 transform: translate3d(calc(var(--z) * 110px), calc(var(--z) * 110px), calc(var(--z) * 110px)); 123 } 124 125 88% { 126 opacity: 1; 127 transform: translate3d(calc(var(--z) * 90px), calc(var(--z) * 90px), calc(var(--z) * 90px)); 128 } 129 130 100% { 131 opacity: 1; 132 transform: translate3d(calc(var(--z) * 100px), calc(var(--z) * 100px), calc(var(--z) * 100px)); 133 } 134}
HTML
1<div class="wrapper"> 2 <button> Button 3 </button> 4</div>