div+css实现炫酷按钮悬浮动画效果代码-html代码-BFW代码库

div+css实现炫酷按钮悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现炫酷按钮悬浮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body {
  background-color: #1d1f20;
  display: grid;
  height: 100vh;
  align-content: center;
  justify-content: center;
  font-family: Roboto, sans-serif;
  margin: 0;
  padding: 0;
}

.container-buttons {
  width: 50vw;
  justify-content: center;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 50px;
}

.button {
  width: 100px;
  height: 40px;
  cursor: pointer;
  position: relative;
  display: grid;
}
.button span {
  margin: auto;
  font-weight: 600;
  display: block;
  font-size: 1em;
}

/*****BUTTON BOUNCE*****/
.container-button {
  cursor: pointer;
}
.container-button:hover .button {
  animation: buttonAnimation 0.7s cubic-bezier(0.17, 0.67, 0.72, 1.53);
}
.container-button .button--bounce {
  border-radius: 50px;
  background-color: #fff;
  box-shadow: 0.5px 5px tomato, 0.5px 20px 15px #00000080;
  transform-origin: center bottom;
  color: tomato;
}
@keyframes buttonAnimation {
  0%, 30% {
    transform: scale(1.5, 0.5);
  }
  30%, 40% {
    transform: scale(1.3, 1);
  }
  30%, 50% {
    transform: scale(1, 1.3);
  }
  50%, 70% {
    transform: scale(1.2, 1);
  }
  70%, 90% {
    transform: scale(1, 1.2);
  }
  90%, 100% {
    transform: scale(1, 1);
  }
}

/*****BUTTON BRIGHTNESS*****/
.button--brightness {
  color: #fff;
  background-color: transparent;
  border: 2px solid #338033;
  border-radius: 5px;
  overflow: hidden;
  transition: background-color 0.7s;
}
.button--brightness:before, .button--brightness:after {
  content: "";
  position: absolute;
  width: 60px;
  height: 100%;
  border-radius: 5px;
  filter: blur(15px);
  opacity: 0;
}
.button--brightness:before {
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate3d(-150%, 0, 0) skew(-15deg);
}
.button--brightness:after {
  top: 0;
  left: 30px;
  width: 30px;
  background-color: #338033;
  transform: translate3d(-100px, 0, 0) skew(-15deg);
}
.button--brightness:hover {
  border: 2px solid #fff;
  background-color: #338033;
  transition: background-color 0.1s, color 0.7s 0.1s, border 0.7s;
}
.button--brightness:hover:before, .button--brightness:hover:after {
  transform: translate3d(180%, 0, 0);
  opacity: 0.6;
  transition: transform 0.7s;
}

/*****BUTTON 3D*****/
.container-button--2 {
  display: grid;
  width: 200px;
  height: 40px;
  grid-template-columns: repeat(2, auto);
  box-shadow: 0px 5px 8px black;
}
.container-button--2 .button-3d--1,
.container-button--2 .button-3d.........完整代码请登录后点击上方下载按钮下载查看