css实现16种鼠标悬浮按钮动画效果代码
代码语言：html
所属分类：悬停
代码描述：css实现16种鼠标悬浮按钮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background:#e0e5ec
}
h1 {
position:relative;
text-align:center;
color:#353535;
font-size:50px;
font-family:"Cormorant Garamond",serif
}
p {
font-family:'Lato',sans-serif;
font-weight:300;
text-align:center;
font-size:18px;
color:#676767
}
.frame {
width:90%;
margin:40px auto;
text-align:center
}
button {
margin:20px
}
.custom-btn {
width:130px;
height:40px;
color:#fff;
border-radius:5px;
padding:10px 25px;
font-family:'Lato',sans-serif;
font-weight:500;
background:transparent;
cursor:pointer;
transition:all .3s ease;
position:relative;
display:inline-block;
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-1 {
background:#060e83;
background:linear-gradient(0deg,rgba(6,14,131,1) 0,rgba(12,25,180,1) 100%);
border:0
}
.btn-1:hover {
background:#0003ff;
background:linear-gradient(0deg,rgba(0,3,255,1) 0,rgba(2,126,251,1) 100%)
}
.btn-2 {
background:#6009f0;
background:linear-gradient(0deg,rgba(96,9,240,1) 0,rgba(129,5,240,1) 100%);
border:0
}
.btn-2:before {
height:0;
width:2px
}
.btn-2:hover {
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:linear-gradient(0deg,rgba(0,172,238,1) 0,rgba(2,126,251,1) 100%);
width:130px;
height:40px;
line-height:42px;
padding:0;
border:0
}
.btn-3 span {
position:relative;
display:block;
width:100%;
height:100%
}
.btn-3:before,.btn-3:after {
position:absolute;
content:"";
right:0;
top:0;
background:rgba(2,126,251,1);
transition:all .3s ease
}
.btn-3:before {
height:0;
width:2px
}
.btn-3:after {
width:0;
height:2px
}
.btn-3:hover {
background:transparent;
box-shadow:none
}
.btn-3:hover:before {
height:100%
}
.btn-3:hover:after {
width:100%
}
.btn-3 span:hover {
color:rgba(2,126,251,1)
}
.btn-3 span:before,.btn-3 span:after {
position:absolute;
content:"";
left:0;
bottom:0;
background:rgba(2,126,251,1);
transition:all .3s ease
}
.btn-3 span:before {
width:2px;
height:0
}
.btn-3 span:after {
width:0;
height:2px
}
.btn-3 span:hover:before {
height:100%
}
.btn-3 span:hover:after {
width:100%
}
.btn-4 {
background-color:#4dccc6;
background-image:linear-gradient(315deg,#4dccc6 0,#96e4df 74%);
line-height:42px;
padding:0;
border:0
}
.btn-4:hover {
background-color:#89d8d3;
background-image:linear-gradient(315deg,#89d8d3 0,#03c8a8 74%)
}
.btn-4 span {
position:relative;
display:block;
width:100%;
height:100%
}
.btn-4:before,.btn-4:after {
position:absolute;
content:"";
right:0;
top:0;
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:all .3s ease
}
.btn-4:before {
height:0;
width:.1px
}
.btn-4:after {
width:0;
height:.1px
}
.btn-4:hover:before {
height:100%
}
.btn-4:hover:after {
width:100%
}
.btn-4 span:before,.btn-4 span:after {
position:absolute;
content:"";
left:0;
bottom:0;
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:all .3s ease
}
.btn-4 span:before {
width:.1px;
height:0
}
.btn-4 span:after {
width:0;
height:.1px
}
.btn-4 span:hover:before {
height:100%
}
.btn-4 span:hover:after {
width:100%
}
.btn-5 {
width:130px;
height:40px;
line-height:42px;
padding:0;
border:0;
background:#ff1b00;
background:linear-gradient(0deg,rgba(255,27,0,1) 0,rgba(251,75,2,1) 100%)
}
.btn-5:hover {
color:#f0094a;
background:transparent;
box-shadow:none
}
.btn-5:before,.btn-5:after {
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background:#f0094a;
box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;
transition:400ms ease all
}
.btn-5:after {
right:inherit;
top:inherit;
left:0;
bottom:0
}
.btn-5:hover:before,.btn-5:hover:after {
width:100%;
transition:800ms ease all
}
.btn-6 {
background:#f796c0;
background:radial-gradient(circle,rgba(247,150,192,1) 0,rgba(118,174,241,1) 100%);
line-height:42px;
padding:0;
border:0
}
.btn-6 span {
position:relative;
display:block;
width:100%;
height:100%
}
.btn-6:before,.btn-6:after {
position:absolute;
content:"";
height:0;
width:1px;
box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),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:all 500ms ease
}
.btn-6:after {
left:0;
bottom:0;
transition:all 500ms ease
}
.btn-6:hover {
background:transparent;
color:#76aef1;
box-shadow:none
}
.btn-6:hover:before {
transition:all 500ms ease;
height:100%
}
.btn-6:hover:after {
transition:all 500ms ease;
height:100%
}
.btn-6 span:before,.btn-6 span:after {
position:absolute;
content:"";
box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),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;
transition:all 500ms ease
}
.btn-6 span:after {
right:0;
bottom:0;
width:0;
height:.5px;
transition:all 500ms ease
}
.btn-6 span:hover:before {
width:100%
}
.btn-6 span:hover:after {
width:100%
}
.btn-7 {
background:linear-gradient(0deg,rgba(255,151,0,1) 0,rgba(251,75,2,1) 100%);
line-height:42px;
padding:0;
border:0
}
.btn-7 span {
position:relative;
display:block;
width:100%;
height:100%
}
.btn-7:before,.btn-7:after {
position:absolute;
content:"";
right:0;
bottom:0;
background:rgba(251,75,2,1);
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:all .3s ease
}
.btn-7:before {
height:0;
width:2px
}
.btn-7:after {
width:0;
height:2px
}
.btn-7:hover {
color:rgba(251,75,2,1);
background:transparent
}
.btn-7:hover:before {
height:100%
}
.btn-7:hover:after {
width:100%
}
.btn-7 span:before,.btn-7 span:after {
position:absolute;
content:"";
left:0;
top:0;
background:rgba(251,75,2,1);
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:all .3s ease
}
.btn-7 span:before {
width:2px;
height:0
}
.btn-7 span:after {
height:2px;
width:0
}
.btn-7 span:hover:before {
height:100%
}
.btn-7 span:hover:after {
width:100%
}
.btn-8 {
background-color:#f0ecfc;
background-image:linear-gradient(315deg,#f0ecfc 0,#c797eb 74%);
line-height:42px;
padding:0;
border:0
}
.btn-8 span {
position:relative;
display:block;
width:100%;
height:100%
}
.btn-8:before,.btn-8:after {
position:absolute;
content:"";
right:0;
bottom:0;
background:#c797eb;
transition:all .3s ease
}
.btn-8:before {
height:0;
width:2px
}
.btn-8:after {
width:0;
height:2px
}
.btn-8:hover:before {
height:100%
}
.btn-8:hover:after {
width:100%
}
.btn-8:hover {
background:transparent
}
.btn-8 span:hover {
color:#c797eb
}
.btn-8 span:before,.btn-8 span:after {
position:absolute;
content:"";
left:0.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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