css实现渐变色按钮动画效果代码-html代码-BFW代码库

css实现渐变色按钮动画效果代码

代码语言：html

代码描述：css实现渐变色按钮动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v24/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v24/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
}
/*----------------------------------------

        VARIABLES

----------------------------------------*/
body * {
  all: unset;
}
body * {
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}
html {
  font-size: 62.5%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-size: 1.6rem;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}
/*----------------------------------------

        BUTTONS 

----------------------------------------*/
button {
  background: #03a9f4;
  color: #fff;
  padding: 2rem 4rem;
  border-radius: 5rem;
  text-transform: uppercase;
  margin: 0 1rem;
}
button.anim-1 {
  background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5);
  background-size: 600%;
  animation: anim-1 10s linear infinite;
}
button.anim-2 {
  background: linear-gradient(-45deg, #FF0085, #00FFA8);
  background-size: 500%;
  animation: anim-1 1.........完整代码请登录后点击上方下载按钮下载查看