css实现简洁按钮悬浮阴影动画效果代码-html代码-BFW代码库

css实现简洁按钮悬浮阴影动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现简洁按钮悬浮阴影动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body{
  background: #10020a;
  font-family: sans-serif;
  font-size: 21px;
  display: flex;
  height: 100vh;
}

  .btn {
    background-size: 50%,100%;
  }

.btn::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10em;
  -webkit-transition: -webkit-box-shadow .4s ease-in-out;
  transition: -webkit-box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out,-webkit-box-shadow .4s ease-in-out;
}

.btn {
  position: relative;
  margin: auto;
  background: -webkit-gradient(linear,left top,right top,from(#700f46),color-stop(#d61361),color-stop(#f41445),color-stop(#fc1e39),color-stop(#ff4f28),to(#ffb11e));
  background: linear-gradient(90deg,#700f46,#d61361,#f41445,#fc1e39,#ff4f28,#ffb11e);
  background: url(/img/white-noise.png),linear-gradient(87.58deg,#700f46 .61%,#d61361 27.89%,#f41445 51.19%,#fc1e39 81.31%,#ff4f28 90.97%,#ffb11e 109.72%);
    background-size: auto, auto;
  background-size: 35%,100%;
  background-blend-mode: overlay,normal;
  border-radius: 10em;
  text-decoration: none;
  padding: .85rem 2rem;
  font-weight: 500;
  display: inline-block;
  -webkit-transition: background-size .........完整代码请登录后点击上方下载按钮下载查看