css实现40款鼠标悬浮按钮动画效果代码
代码语言：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 20px 0 #0003,4px 4px 5px 0 #0002;
-webkit-transition:.4s;
-o-transition:.4s;
transition:.4s
}
.btn-5:after {
right:inherit;
top:inherit;
left:0;
bottom:0
}
.btn-5:hover:after,.btn-5:hover:before {
width:100%;
-webkit-transition:.8s;
-o-transition:.8s;
transition:.8s
}
.btn-6:after,.btn-6:before {
-webkit-transition:.5s;
-o-transition:.5s
}
.btn-6 {
background:#f796c0;
background:-o-radial-gradient(circle,#f796c0 0,#76aef1 100%);
background:radial-gradient(circle,#f796c0 0,#76aef1 100%)
}
.btn-6:after,.btn-6:before {
position:absolute;
content:"";
height:0;
width:1px;
-webkit-box-shadow:-1px -1px 20px 0 #fff,-4px -4px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3);
box-shadow:-1px -1px 20px 0 #fff,-4px -4px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)
}
.btn-6:before {
right:0;
top:0;
transition:.5s
}
.btn-6:after {
left:0;
bottom:0;
transition:.5s
}
.btn-6:hover {
background:0;
color:#76aef1;
-webkit-box-shadow:none;
box-shadow:none
}
.btn-6:hover:after,.btn-6:hover:before {
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s;
height:100%
}
.btn-6 span:after,.btn-6 span:before {
position:absolute;
content:"";
-webkit-box-shadow:-1px -1px 20px 0 #fff,-4px -4px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3);
box-shadow:-1px -1px 20px 0 #fff,-4px -4px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)
}
.btn-6 span:before {
left:0;
top:0;
width:0;
height:.5px;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s
}
.btn-6 span:after {
right:0;
bottom:0;
width:0;
height:.5px;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s
}
.btn-7 {
background:-webkit-gradient(linear,left bottom,left top,from(#ff9700),to(#fb4b02));
background:-o-linear-gradient(bottom,#ff9700 0,#fb4b02 100%);
background:linear-gradient(0deg,#ff9700 0,#fb4b02 100%)
}
.btn-7:after,.btn-7:before {
content:"";
right:0;
background:#fb4b02;
-webkit-box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);
box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);
transition:.3s
}
.btn-7 span:after,.btn-7 span:before,.btn-8:after,.btn-8:before {
position:absolute;
-webkit-transition:.3s;
-o-transition:.3s;
content:""
}
.btn-7:hover {
color:#fb4b02;
background:0
}
.btn-10,.btn-11,.btn-11:hover,.btn-13:hover,.btn-15:hover,.btn-9:hover {
color:#fff
}
.btn-7 span:after,.btn-7 span:before {
left:0;
top:0;
background:#fb4b02;
-webkit-box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);
box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);
transition:.3s
}
.btn-7 span:after,.btn-8 span:after {
height:2px;
width:0
}
.btn-8 {
background-color:#f0ecfc;
background-image:-o-linear-gradient(135deg,#f0ecfc 0,#c797eb 74%);
background-image:linear-gradient(315deg,#f0ecfc 0,#c797eb 74%)
}
.btn-8:after,.btn-8:before {
right:0;
bottom:0;
background:#c797eb;
transition:.3s
}
.btn-10:after,.btn-9:after {
content:" ";
width:100%;
position:absolute;
left:0;
top:0;
height:100%
}
.btn-8:hover {
background:0
}
.btn-8:hover span {
color:#c797eb
}
.btn-8 span:after,.btn-8 span:before {
position:absolute;
content:"";
left:0;
top:0;
background:#c797eb;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s
}
.btn-9 {
border:0;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s;
overflow:hidden
}
.btn-10,.btn-9:after {
-webkit-transition:.3s;
-o-transition:.3s
}
.btn-9:after {
z-index:-1;
background-color:#1fd1f9;
background-image:-o-linear-gradient(135deg,#1fd1f9 0,#b621fe 74%);
background-image:linear-gradient(315deg,#1fd1f9 0,#b621fe 74%);
transition:.3s
}
.btn-9:hover {
background:0;
-webkit-box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);
box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)
}
.btn-9:hover:after {
-webkit-transform:scale(2) rotate(180deg);
-ms-transform:scale(2) rotate(180deg);
transform:scale(2) rotate(180deg);
-webkit-box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);
box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)
}
.btn-10 {
background:#1609f0;
background:-webkit-gradient(linear,left bottom,left top,from(#1609f0),to(#316ef4));
background:-o-linear-gradient(bottom,#1609f0 0,#316ef4 100%);
background:linear-gradient(0deg,#1609f0 0,#316ef4 100%);
border:0;
transition:.3s;
overflow:hidden
}
.btn-10:after,.btn-13:after {
z-index:-1;
-webkit-transition:.3s;
-o-transition:.3s
}
.btn-10:after {
transition:.3s;
-webkit-transform:scale(.1);
-ms-transform:scale(.1);
transform:scale(.1)
}
.btn-10:hover {
color:#fff;
border:0;
background:0
}
.btn-10:hover:after {
background:#0003ff;
background:-webkit-gradient(linear,left bottom,left top,from(#027efb),to(#0003ff));
background:-o-linear-gradient(bottom,#027efb 0,#0003ff100%);
background:linear-gradient(0deg,#027efb 0,#0003ff100%);
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
.btn-17:before,.btn-18:before {
-webkit-transform:translateX(-100%);
-ms-transform:translateX(-100%);
bottom:0
}
.btn-11 {
border:0;
background:#fb2175;
background:-webkit-gradient(linear,left bottom,left top,from(#fb2175),to(#ea4c89));
background:-o-linear-gradient(bottom,#fb2175 0,#ea4c89 100%);
background:linear-gradient(0deg,#fb2175 0,#ea4c89 100%);
overflow:hidden
}
.btn-11:hover {
opacity:.7
}
.btn-11:before {
position:absolute;
content:'';
display:inline-block;
top:-180px;
left:0;
width:30px;
height:100%;
background-color:#fff;
-webkit-animation:3s ease-in-out infinite shiny-btn1;
animation:3s ease-in-out infinite shiny-btn1
}
.btn-13:after,.btn-14:after {
position:absolute;
content:"";
height:0;
width:100%;
left:0
}
.btn-11:active {
-webkit-box-shadow:4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2);
box-shadow:4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)
}
.btn-12 {
position:relative;
background:-webkit-gradient(linear,left bottom,left top,from(#1609f0),to(#316ef4));
background:-o-linear-gradient(bottom,#1609f0 0,#316ef4 100%);
background:linear-gradient(0deg,#1609f0 0,#316ef4 100%);
border:0;
-webkit-box-shadow:none;
box-shadow:none
}
.btn-12:hover {
background:-o-radial-gradient(#0916f0,#6e31f4);
background:radial-gradient(#0916f0,#6e31f4)
}
.btn-13 {
background-color:#89d8d3;
background-image:-o-linear-gradient(135deg,#89d8d3 0,#03c8a8 74%);
background-image:linear-gradient(315deg,#89d8d3 0,#03c8a8 74%);
border:0;
z-index:1
}
.btn-13:after {
bottom:0;
background-color:#4dccc6;
background-image:-o-linear-gradient(135deg,#4dccc6 0,#96e4df 74%);
background-image:linear-gradient(315deg,#4dccc6 0,#96e4df 74%);
-webkit-box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;
box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;
transition:.3s
}
.btn-14:after,.btn-15:after {
-webkit-transition:.3s;
-o-transition:.3s
}
.btn-14:hover,.btn-16,.btn-16:hover {
color:#000
}
.btn-13:hover:after {
top:0;
height:100%
}
.btn-13:active,.btn-14:active,.btn-15:active,.btn-16:active {
top:2px
}
.btn-14 {
background:#ff9700;
border:0;
z-index:1
}
.btn-14:after {
top:0;
z-index:-1;
background-color:#eaf818;
background-image:-o-linear-gradient(135deg,#eaf818 0,#f6fc9c 74%);
background-image:linear-gradient(315deg,#eaf818 0,#f6fc9c 74%);
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);
transition:.3s
}
.btn-15:after,.btn-16:after {
width:0;
z-index:-1;
top:0;
position:absolute;
content:""
}
.btn-14:hover:after {
top:auto;
bottom:0;
height:100%
}
.btn-15 {
background:#b621fe;
border:0;
z-index:1
}
.btn-15:after {
height:100%;
right:0;
background-color:#663dff;
-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);
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);
transition:.3s
}
.btn-15:hover:after {
left:0;
width:100%
}
.btn-16 {
border:0
}
.btn-16:after {
height:100%;
left:0;
direction:rtl;
-webkit-box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;
box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s
}
.btn-16:hover:after {
left:auto;
right:0;
width:100%
}
.collection-2 {
display:inline-flex;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:100%;
border:1px solid currentColor;
text-transform:capitalize;
-webkit-transition:.3s ease-in-out;
-o-transition:.3s ease-in-out;
transition:.3s ease-in-out
}
.collection-2:hover {
border:1px solid transparent;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s
}
.btn-18:before,.btn-19:before,.btn-20:before {
border-right:50px solid transparent
}
.btn-19:after,.btn-20:after {
border-left:50px solid transparent
}
.collection-2:after,.collection-2:before,.collection-2:after,.collection-2:before {
-webkit-transition:.3s ease-in-out;
-o-transition:.3s ease-in-out;
transition:.3s ease-in-out;
z-index:-1
}
.btn-17 {
color:#90639a
}
.btn-17:before {
content:"";
position:absolute;
top:0;
right:0;
left:0;
background-color:#4a2b52;
transform:translateX(-100%)
}
.btn-17:hover {
color:#ded1e1
}
.btn-17:hover:before,.btn-18:hover:before {
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0)
}
.btn-18 {
color:#476776
}
.btn-18:before {
content:"";
position:absolute;
top:0;
right:-50px;
left:0;
border-bottom:80px solid #172e38;
transform:translateX(-100%)
}
.btn-18:hover {
color:#c9d2d7
}
.btn-19 {
color:#347a87
}
.btn-19:after,.btn-19:before {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border-bottom:80px solid #0a3b44
}
.btn-19:before {
right:-50px;
-webkit-transform:translateX(-100%);
-ms-transform:translateX(-100%);
transform:translateX(-100%)
}
.btn-19:after {
left:-50px;
-webkit-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%)
}
.btn-19:hover {
color:#c3d8dc
}
.btn-19:hover:before {
-webkit-transform:translateX(-40%);
-ms-transform:translateX(-40%);
transform:translateX(-40%)
}
.btn-19:hover:after {
-webkit-transform:translateX(40%);
-ms-transform:translateX(40%);
transform:translateX(40%)
}
.btn-20 {
color:#59c42b
}
.btn-20:after,.btn-20:before {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0
}
.btn-20:before {
right:-50px;
border-bottom:80px solid #246f04;
-webkit-transform:translateX(-100%);
-ms-transform:translateX(-100%);
transform:translateX(-100%)
}
.btn-20:after {
left:-50px;
border-top:80px solid #246f04;
-webkit-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%)
}
.btn-20:hover {
color:#ceeec1
}
.btn-20:hover:before {
-webkit-transform:translateX(-49%);
-ms-transform:translateX(-49%);
transform:translateX(-49%)
}
.btn-20:hover:after {
-webkit-transform:translateX(49%);
-ms-transform:translateX(49%);
transform:translateX(49%)
}
.btn-21:hover {
border:1px solid #0a3b44
}
.btn-21:before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#0a3b44;
-webkit-transform:translateX(-100%);
-ms-transform:translateX(-100%);
transform:translateX(-100%)
}
.btn-21:hover:before {
-webkit-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%)
}
.btn-22 {
color:#4ccf67
}
.btn-22 span:after,.btn-22 span:before,.btn-22:after,.btn-22:before {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:#1a772e
}
.btn-22:before {
-webkit-transform:translate(-100%,-100%);
-ms-transform:translate(-100%,-100%);
transform:translate(-100%,-100%)
}
.btn-22:after {
-webkit-transform:translate(-100%,100%);
-ms-transform:translate(-100%,100%);
transform:translate(-100%,100%)
}
.btn-22 span:before {
-webkit-transform:translate(100%,-100%);
-ms-transform:translate(100%,-100%);
transform:translate(100%,-100%)
}
.btn-22 span:after {
-webkit-transform:translate(100%,100%);
-ms-transform:translate(100%,100%);
transform:translate(100%,100%)
}
.btn-22:hover {
color:#caf1d2
}
.btn-22:hover:before {
-webkit-transform:translate(-49%,-49%);
-ms-transform:translate(-49%,-49%);
transform:translate(-49%,-49%)
}
.btn-22:hover:after {
-webkit-transform:translate(-49%,50%);
-ms-transform:translate(-49%,50%);
transform:translate(-49%,50%)
}
.btn-22:hover span:before {
-webkit-transform:translate(49%,-49%);
-ms-transform:translate(49%,-49%);
transform:translate(49%,-49%)
}
.btn-22:hover span:after {
-webkit-transform:translate(50%,50%);
-ms-transform:translate(50%,50%);
transform:t.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0