8种提交按钮悬浮动画效果-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：8种提交按钮悬浮动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sail&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Iceberg&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100%;
  font-size: 20px;
}

header {
  position: absolute;
  top: 0;
  left: 50%;
  width: 90%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  font-family: 'Merriweather', serif;
  text-align: center;
}
header p {
  font-size: .8em;
}

.layout {
  position: absolute;
  top: 5em;
  left: 50%;
  -webkit-transform: translate(-55%, 0);
          transform: translate(-55%, 0);
  width: 16em;
  margin: 3em auto;
}

.btn1 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 7em;
  height: 2em;
  background: #0eff00;
  background: linear-gradient(331deg, #0eff00 0%, #00ecff 90%);
  border-radius: .25em;
  border: none;
  box-shadow: .1em .1em .15em grey;
  font-family: 'Sail', cursive;
  font-size: 1.2em;
  color: white;
  outline: none;
}
.btn1 .btn1-first {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #0eff00;
  background: linear-gradient(331deg, #0eff00 0%, #00ecff 90%);
  background-attachment: fixed;
  background-size: 1em;
  border-radius: .15em .15em 0 0;
  overflow: hidden;
}
.btn1 .btn1-first p {
  position: absolute;
  top: -.6em;
  left: 1.9444444444em;
  color: white;
}
.btn1 .btn1-second {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #0eff00;
  background: linear-gradient(331deg, #0eff00 0%, #00ecff 90%);
  background-attachment: fixed;
  background-size: 1em;
  border-radius: 0 0 .15em .15em;
  overflow: hidden;
}
.btn1 .btn1-second p {
  position: absolute;
  top: -1.6em;
  left: 1.9444444444em;
  color: white;
}

.btn1:focus div {
  -webkit-animation: shrink 1s linear forwards;
          animation: shrink 1s linear forwards;
}

@-webkit-keyframes shrink {
  0% {
    height: .9em;
  }
  100% {
    height: 0em;
  }
}

@keyframes shrink {
  0% {
    height: .9em;
  }
  100% {
    height: 0em;
  }
}
.btn2 {
  position: absolute;
  top: 0%;
  left: 9em;
  width: 7em;
  height: 2em;
  padding-top: .2em;
  background: #949494;
  background: linear-gradient(135deg, #949494 0%, white 100%);
  border-radius: .25em;
  border: none;
  box-shadow: .1em .1em .15em grey;
  font-family: 'Modak', cursive;
  font-size: 1.2em;
  color: white;
  outline: none;
}
.btn2 .btn2-first {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #949494;
  background: linear-gradient(135deg, #949494 0%, white 100%);
  border-radius: .25em;
  opacity: 0;
}
.btn2 .btn2-first p {
  position: absolute;
  top: -.55em;
  width: 100%;
  height: 100%;
  font-family: 'Modak', cursive;
  text-align: center;
}

.btn2:focus {
  -webkit-animation: spring 1.5s linear;
          animation: spring 1.5s linear;
}

.btn2:focus .btn2-first {
  -webkit-animation: opacity .75s linear forwards;
          animation: opacity .75s linear forwards;
}

@-webkit-keyframes spring {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  25% {
    -webkit-transform: scale(0) rotate(180deg);
            transform: scale(0) rotate(180deg);
  }
  50% {
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
  }
  60% {
    -webkit-transform: scale(1.2) rotate(380deg);
            transform: scale(1.2) rotate(380deg);
  }
  70% {
    -webkit-transform: scale(0.8) rotate(340deg);
            transform: scale(0.8) rotate(340deg);
  }
  80% {
    -webkit-transform: scale(1.1) rotate(370deg);
            transform: scale(1.1) rotate(370deg);
  }
  90% {
    -webkit-transform: scale(0.9) rotate(350deg);
            transform: scale(0.9) rotate(350deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
  }
}

@keyframes spring {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  25% {
    -webkit-transform: scale(0) rotate(180deg);
            transform: scale(0) rotate(180deg);
  }
  50% {
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
  }
  60% {
    -webkit-transform: scale(1.2) rotate(380deg);
            transform: scale(1.2) rotate(380deg);
  }
  70% {
    -webkit-transform: scale(0.8) rotate(340deg);
            transform: scale(0.8) rotate(340deg);
  }
  80% {
    -webkit-transform: scale(1.1) rotate(370deg);
            transform: scale(1.1) rotate(370deg);
  }
  90% {
    -webkit-transform: scale(0.9) rotate(350deg);
            transform: scale(0.9) rotate(350deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
  }
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.btn3 {
  position: absolute;
  top: 4em;
  left: 0;
  width: 7em;
  height: 2em;
  background: black;
  font-family: 'Russo One', sans-serif;
  border-radius: .25em;
  border: none;
  box-shadow: .1em .1em .15em grey;
  font-size: 1.2em;
  color: white;
  outline: none;
}
.btn3 .btn3-first {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: white;
  color: black;
  border-radius: .25em 0 0 .25em;
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}
.btn3 .btn3-first p {
  position: absolute;
  top: -.55em;
  right: .15em;
  width: 50%;
  height: 100%;
  text-align: center;
}
.btn3 .btn3-second {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: white;
  color: black;
  border-radius: 0 .25em .25em 0;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.btn3 .btn3-second p {
  position: absolute;
  top: -.55em;
  left: 0;
  width: 50%;
  height: 100%;
  text-align: center;
}

.btn3:focus .btn3-first {
  -webkit-animation: fall1 2s ease-out forwards;
          animation: fall1 2s ease-out forwards;
}

.btn3:focus .btn3-second {
  -webkit-animation: fall2 2s linear forwards;
          animation: fall2 2s linear forwards;
}

@-webkit-keyframes fall1 {
  0% {
    -webkit-transform: rotate(0deg) translateY(0);
            transform: rotate(0deg) translateY(0);
    opacity: 1;
  }
  30% {
    -webkit-transform: rotate(120deg) translateY(0);
            transform: rotate(120deg) translateY(0);
    opacity: 1;
  }
  40% {
    -webkit-transform: rotate(70deg) translateY(0);
            transform: rotate(70deg) translateY(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(110deg) translateY(0);
            transform: rotate(110deg) translateY(0);
    opacity: 1;
  }
  60% {
    -webkit-transform: rotate(80deg) translateY(0);
            transform: rotate(80deg) translateY(0);
    opacity: 1;
  }
  70% {
    -webkit-transform: rotate(100deg) translateY(0);
            transform: rotate(100deg) translateY(0);
    opacity: 1;
  }
  80% {
    -webkit-transform: rotate(85deg) translateY(0);
            transform: rotate(85deg) translateY(0);
    opacity: 1;
  }
  90% {
    -webkit-transform: rotate(90deg) translateY(0);
            transform: rotate(90deg) translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(90deg) translateX(100px);
            transform: rotate(90deg) translateX(100px);
    opacity: 0;
  }
}

@keyframes fall1 {
  0% {
    -webkit-transform: rotate(0deg) translateY(0);
            transform: rotate(0deg) translateY(0);
    opacity: 1;
  }
  30% {
    -webkit-transform: rotate(120deg) translateY(0);
            transform: rotate(120deg) translateY(0);
    opacity: 1;
  }
  40% {
    -webkit-transform: rotate(70deg) translateY(0);
            transform: rotate(70deg) translateY(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(110deg) translateY(0);
            transform: rotate(110deg) translateY(0);
    opacity: 1;
  }
  60% {
    -webkit-transform: rotate(80deg) translateY(0);
            transform: rotate(80deg) translateY(0);
    opacity: 1;
  }
  70% {
    -webkit-transform: rotate(100deg) translateY(0);
            transform: rotate(100deg) translateY(0);
    opacity: 1;
  }
  80% {
    -webkit-transform: rotate(85deg) translateY(0);
            transform: rotate(85deg) translateY(0);
    opacity: 1;
 .........完整代码请登录后点击上方下载按钮下载查看