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;
}
