浮动举报按钮html,Css浮动按钮

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;

}