css实现11种鼠标悬浮渐变按钮动画效果代码-html代码-BFW代码库

css实现11种鼠标悬浮渐变按钮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现11种鼠标悬浮渐变按钮动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.buttons{margin:10%;text-align:center}.btn-hover{width:200px;font-size:16px;font-weight:600;color:#fff;cursor:pointer;margin:20px;height:55px;text-align:center;border:0;background-size:300% 100%;border-radius:50px;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.btn-hover:hover{background-position:100% 0;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.btn-hover:focus{outline:0}.btn-hover.color-1{background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,0.75)}.btn-hover.color-2{background-image:linear-gradient(to right,#f5ce62,#e43603,#fa7199,#e85a19);box-shadow:0 4px 15px 0 rgba(229,66,10,0.75)}.btn-hover.color-3{background-image:linear-gradient(to right,#667eea,#764ba2,#6B8DD6,#8E37D7);box-shadow:0 4px 15px 0 rgba(116,79,168,0.75)}.btn-hover.color-4{background-image:linear-gradient(to right,#fc6076,#ff9a44,#ef9d43,#e75516);box-shadow:0 4px 15px 0 rgba(252,104,110,0.75)}.btn-hover.color-5{background-image:linear-gradient(to right,#0ba360,#3cba92,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(23,168,108,0.75)}.btn-hover.color-6{background-image:linear-gradient(to right,#009245,#FCEE21,#00A8C5,#D9E021);box-shadow:0 4px 15px 0 rgba(83,176,57,0.75)}.btn-hover.........完整代码请登录后点击上方下载按钮下载查看