Floating Button #2

HTML
<link href="https://fonts.googleapis.com/css?family=Chewy" rel="stylesheet"> <button> <span class="shadow"> <span class="vert"> <span class="floating"> <span class="front">Click me !</span> <span class="back">Anywhere else...</span> </span> </span> </span> </button>
CSS
body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: crimson; } * { box-sizing: border-box; } button { position: relative; background: none; cursor: pointer; border: 0; padding: 0; outline: 0; font-family: 'Chewy', cursive; color: crimson; width: 250px; } span { display: block; } .shadow:before, .shadow:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; background: red; z-index: -1; background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); opacity: .4; transform: rotateX(0); transform-origin: center 30px; filter: blur(1px); animation: shadowLeft 2s ease-in-out alternate infinite; transition: all 1s cubic-bezier(0.875, -0.555, 0.190, 1.640); } @keyframes shadowLeft { to { opacity: .1; filter: blur(5px); } } .shadow:after { background: linear-gradient(to left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); opacity: .1; filter: blur(5px); animation: shadowRight 2s ease-in-out alternate infinite; } @keyframes shadowRight { to { opacity: .4; filter: blur(1px); } } button:focus .shadow:before, button:focus .shadow:after { transform: rotateX(180deg); } .vert { transform: translateY(-20px); animation: vert 1s ease-in-out alternate infinite; } @keyframes vert { to { transform: translateY(-25px); } } .floating { background-color: transparent; -webkit-perspective: 800; -webkit-transform-style: preserve-3d; transform: rotateY(-3deg) skewY(-3deg); animation: swing 2s cubic-bezier(0.420, 0.000, 0.580, 1.000) alternate infinite; } @keyframes swing { to { transform: rotateY(3deg) skewY(3deg); } } .floating span { display: block; padding: 10px 0; border-radius: 100px; font-size: 30px; background: #fff; transition: all 1s cubic-bezier(0.875, -0.555, 0.190, 1.640); transform: translateY(-3px) translateZ(5px) rotateX(0); width: 100%; } span.back { position: absolute; top: 0; left: 0; background: #aaa; transform: translateY(3px) translateZ(-5px) rotateX(-180deg); } button:focus .front { transform: translateY(3px) translateZ(-5px) rotateX(180deg); background: #aaa; } button:focus .back { transform: translateY(-3px) translateZ(5px) rotateX(0); background: #fff; }
JAVASCRIPT
Expand for more options Login