css实现40款鼠标悬浮按钮动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：css实现40款鼠标悬浮按钮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;
        	500;
        	700&display=swap);
        	.collection-1,h1 {
        	position:relative
        }
        .wrapper,h1,html,p {
        	text-align:center
        }
        .btn-14:after,.collection-1 {
        	-webkit-box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1)
        }
        .btn-11:hover,a {
        	text-decoration:none
        }
        .btn-39 span,.btn-39>button {
        	letter-spacing:0;
        	display:inline-block
        }
        html {
        	font-family:"Open Sans",Helvetica,arial,sans-serif;
        	font-weight:500
        }
        html *,html:after,html:before {
        	-webkit-box-sizing:border-box;
        	box-sizing:border-box
        }
        .collection-2 span,html b,html em,html i,html span,html strong {
        	-webkit-transition:none;
        	-o-transition:none;
        	transition:none
        }
        .btn-3:after,.btn-3:before,.collection-1 {
        	-webkit-transition:.3s;
        	-o-transition:.3s
        }
        a {
        	font-size:inherit;
        	color:inherit
        }
        body {
        	background:#e0e5ec
        }
        h1 {
        	color:#353535;
        	font-size:50px
        }
        p {
        	font-size:26px
        }
        .wrapper {
        	margin:40px auto
        }
        .center {
        	display:-webkit-box;
        	display:-ms-flexbox;
        	display:flex;
        	-webkit-box-pack:center;
        	-ms-flex-pack:center;
        	justify-content:center;
        	-webkit-box-align:center;
        	-ms-flex-align:center;
        	align-items:center
        }
        .collection-1,.collection-2 {
        	text-align:center;
        	-webkit-box-align:center;
        	height:80px;
        	font-family:"Open Sans",Helvetica,arial,sans-serif;
        	font-size:16px;
        	font-weight:500;
        	cursor:pointer
        }
        button {
        	margin:20px;
        	background-color:initial
        }
        .collection-1 {
        	display:-webkit-inline-box;
        	display:-ms-inline-flexbox;
        	display:inline-flex;
        	-ms-flex-align:center;
        	align-items:center;
        	-webkit-box-pack:center;
        	-ms-flex-pack:center;
        	justify-content:center;
        	max-width:200px;
        	width:100%;
        	padding:10px 25px;
        	margin:20px;
        	background:0;
        	transition:.3s;
        	color:#fff;
        	box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);
        	outline:0
        }
        .collection-2,.collection-3 {
        	margin:20px;
        	max-width:200px;
        	display:-webkit-inline-box;
        	display:-ms-inline-flexbox;
        	overflow:hidden;
        	position:relative
        }
        .btn-3,.btn-4,.btn-5,.btn-6,.btn-7,.btn-8 {
        	padding:0;
        	border:0
        }
        .btn-1 {
        	background:#060e83;
        	background:-webkit-gradient(linear,left bottom,left top,from(#060e83),to(#0c19b4));
        	background:-o-linear-gradient(bottom,#060e83 0,#0c19b4 100%);
        	background:linear-gradient(0deg,#060e83 0,#0c19b4 100%);
        	border:0
        }
        .btn-1:hover {
        	background:#0003ff;
        	background:-webkit-gradient(linear,left bottom,left top,from(#0003ff),to(#027efb));
        	background:-o-linear-gradient(bottom,#0003ff 0,#027efb 100%);
        	background:linear-gradient(0deg,#0003ff 0,#027efb 100%)
        }
        .btn-2 {
        	background:#6009f0;
        	background:-webkit-gradient(linear,left bottom,left top,from(#6009f0),to(#8105f0));
        	background:-o-linear-gradient(bottom,#6009f0 0,#8105f0 100%);
        	background:linear-gradient(0deg,#6009f0 0,#8105f0 100%);
        	border:0
        }
        .btn-2:before,.btn-3:before,.btn-7:before,.btn-8:before {
        	height:0;
        	width:2px
        }
        .btn-2:hover {
        	-webkit-box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4);
        	box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4)
        }
        .btn-3 {
        	background:#00acee;
        	background:-webkit-gradient(linear,left bottom,left top,from(#00acee),to(#027efb));
        	background:-o-linear-gradient(bottom,#00acee 0,#027efb 100%);
        	background:linear-gradient(0deg,#00acee 0,#027efb 100%)
        }
        .btn-3 span:first-child,.btn-4 span:first-child,.btn-6 span:first-child,.btn-7 span:first-child,.btn-8 span:first-child {
        	position:absolute;
        	display:block;
        	width:100%;
        	height:100%
        }
        .btn-3:after,.btn-3:before {
        	position:absolute;
        	content:"";
        	right:0;
        	top:0;
        	background:#027efb;
        	transition:.3s
        }
        .btn-3 span:after,.btn-3 span:before,.btn-4:after,.btn-4:before {
        	position:absolute;
        	-webkit-transition:.3s;
        	-o-transition:.3s;
        	content:""
        }
        .btn-3 span:after,.btn-3:after,.btn-7:after,.btn-8:after {
        	width:0;
        	height:2px
        }
        .btn-3:hover {
        	background:0;
        	-webkit-box-shadow:none;
        	box-shadow:none
        }
        .btn-3 span:hover:before,.btn-3:hover:before,.btn-4 span:hover:before,.btn-4:hover:before,.btn-7 span:hover:before,.btn-7:hover:before,.btn-8 span:hover:before,.btn-8:hover:before {
        	height:100%
        }
        .btn-3 span:hover:after,.btn-33:hover .border:first-of-type,.btn-33:hover .border:nth-of-type(3),.btn-3:hover:after,.btn-4 span:hover:after,.btn-4:hover:after,.btn-6 span:hover:after,.btn-6 span:hover:before,.btn-7 span:hover:after,.btn-7:hover:after,.btn-8 span:hover:after,.btn-8:hover:after {
        	width:100%
        }
        .btn-3:hover span {
        	color:#027efb
        }
        .btn-3 span:after,.btn-3 span:before {
        	left:0;
        	bottom:0;
        	background:#027efb;
        	transition:.3s
        }
        .btn-3 span:before,.btn-7 span:before,.btn-8 span:before {
        	width:2px;
        	height:0
        }
        .btn-4 {
        	background-color:#4dccc6;
        	background-image:-o-linear-gradient(135deg,#4dccc6 0,#96e4df 74%);
        	background-image:linear-gradient(315deg,#4dccc6 0,#96e4df 74%)
        }
        .btn-4:hover {
        	background-color:#89d8d3;
        	background-image:-o-linear-gradient(135deg,#89d8d3 0,#03c8a8 74%);
        	background-image:linear-gradient(315deg,#89d8d3 0,#03c8a8 74%)
        }
        .btn-4:after,.btn-4:before {
        	right:0;
        	top:0;
        	-webkit-box-shadow:4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);
        	box-shadow:4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);
        	transition:.3s
        }
        .btn-4 span:after,.btn-4 span:before,.btn-7:after,.btn-7:before {
        	position:absolute;
        	-webkit-transition:.3s;
        	-o-transition:.3s;
        	bottom:0
        }
        .btn-4:before {
        	height:0;
        	width:.1px
        }
        .btn-4 span:after,.btn-4:after {
        	width:0;
        	height:.1px
        }
        .btn-4 span:after,.btn-4 span:before {
        	content:"";
        	left:0;
        	-webkit-box-shadow:4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);
        	box-shadow:4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);
        	transition:.3s
        }
        .btn-4 span:before {
        	width:.1px;
        	height:0
        }
        .btn-5 {
        	background:#ff1b00;
        	background:-webkit-gradient(linear,left bottom,left top,from(#ff1b00),to(#fb4b02));
        	background:-o-linear-gradient(bottom,#ff1b00 0,#fb4b02 100%);
        	background:linear-gradient(0deg,#ff1b00 0,#fb4b02 100%)
        }
        .btn-5:hover {
        	color:#f0094a;
        	background:0;
        	-webkit-box-shadow:none;
        	box-shadow:none
        }
        .btn-5:after,.btn-5:before {
        	content:'';
        	position:absolute;
        	top:0;
        	right:0;
        	height:2px;
        	width:0;
        	background:#f0094a;
        	-webkit-box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;
        	box-shadow:-1px -1px 5px 0 #fff,7px 7px 2.........完整代码请登录后点击上方下载按钮下载查看