html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基于css3的鼠标滑动按钮动画</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/btn1.css">
<div id="wrap">
<a href="#" class="btn-slide"><span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">火箭</span> <span class="title-hover">带你飞</span> </a><a href="#"
class="btn-slide2"><span class="circle2"><i class="fa fa-download"></i></span><span
class="title2">下载</span> <span class="title-hover2">点击下载</span> </a>
</div>
<link rel="stylesheet" type="text/css" href="css/btn2.css">
<div class="container1">
<div class="con_down1">
<i class="fa fa-download fa-2x"></i>
<h4>
Download Now</h4>
</div>
<div class="con_sizes1">
<div class="sizes1">
<h5 class="size1">
34.5 MB</h5>
<div class="sizes_abs1">
</div>
</div>
</div>
</div>
<div class="container2">
<div class="con_down2">
<i class="fa fa-download fa-2x"></i>
<h4>
Download now</h4>
</div>
<div class="con_sizes2">
<div class="sizes2">
<h5 class="size2">
34.5 MB</h5>
<div class="sizes_abs2">
</div>
</div>
</div>
</div>
<div>
<br />
<br />
</div>
<link rel="stylesheet" type="text/css" href="css/btn3.css">
<div class="center">
<a class="spinningeffect" href="#" target="_blank">
<img src="img/blogger-logo1.jpg" />
</a>
</div>
<div>
<br />
</div>
<link rel="stylesheet" type="text/css" href="css/focus.css">
<div class="center">
<a class="zoomeffect" href="#" target="_blank">
<img src="img/addfocus.jpg" /></a>
</div>
<div>
<br />
</div>
<link rel="stylesheet" type="text/css" href="css/btn4.css">
<div class="mudwnpbutton center">
<a href="#" target="blank" rel="nofollow">预览</a>
</div>
<link rel="stylesheet" type="text/css" href="css/btn5.css">
<div class="whitebuttondemo">
<a href="#">button</a> <span class="up">message</span>
</div>
<div>
<br />
<br />
</div>
<div class="whitebutton">
<a href="#">button</a> <span class="up">top message</span> <span class="down">1.6MB
.rar </span>
</div>
<div>
</div>
<script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
</body>
</html>
btn1
#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
right: 100%;
margin-right: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
right: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
right: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: right;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
right: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
right: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
right: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
right: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}
btn2
/*--按钮1--*/
.container1 {
width:200px;
display:block;
margin:20px auto;
position:relative;
font-family:droid arabic kufi;
}
.con_down1 {
display:block;
cursor:pointer;
background-color:#F6EB96;
width:190px;
height:50px;
padding-left:10px;
padding-top:5px;
text-align:left;
border-bottom:4px solid #D8B83C;
border-radius:5px;
position:relative;
line-height:50px;
}
.con_down1 .fa-download{
position:absolute;
right:10px;
top:15px;color:#895D0A;
}
.con_down1 h4 {
color:#895D0A;
text-transform:uppercase;
margin:0;
}
.sizes1 h5 {
margin:0;
}
.sizes1 {
background-color:#E3E3E3;
width:100px;
height:30px;
z-index:-9;
padding-top:2px;
border-bottom:4px solid #AAA9A9;
position:absolute;
top:13px;
left:20px;
transition:.5s all ease-in-out;
}
.size {
line-height:30px;
text-align:center;
color:#4B4B4B;
}
.sizes_abs1 {
background-color:#F6EB96;
cursor:pointer;
width:20px;
border-bottom:4px solid #D8B83C;
border-bottom-left-radius:5px;
border-top-left-radius:5px;
height:55px;
position:absolute;
top:-13px;
left:-20px;
z-index:2;
}
.container1:hover .sizes1 {
left:-100px;
}
.container1:hover .con_down1 {
background-color:#F1DD5E;
border-bottom-left-radius:0;
border-top-left-radius:0;
}
.container1:hover .sizes_abs1 {
background-color:#F1DD5E;
}
/*--按钮2--*/
.container2 {
width:200px;
display:block;
margin:20px auto;
position:relative;
font-family:droid arabic kufi;
}
.con_down2 {
display:block;
cursor:pointer;
background-color:#F6EB96;
width:190px;
height:50px;
padding-left:10px;
padding-top:5px;
text-align:left;
border-bottom:4px solid #D8B83C;
border-radius:5px;
position:relative;
line-height:50px;
transition:.5s all ease-in-out;
}
.con_down2 .fa-download {
position:absolute;
right:10px;
top:15px;
color:#895D0A;
}
.con_down2 h4 {
color:#895D0A;
text-transform:uppercase;
margin:0;
}
.sizes2 h5 {
margin:0;
}
.sizes2 {
background-color:#E3E3E3;
width:100px;
height:30px;
z-index:-9;
position:absolute;
bottom:22px;
right:50%;
margin-right:-50px;
transition:.5s all ease-in-out;
}
.size {
line-height:30px;
text-align:center;
color:#4B4B4B;
}
.sizes_abs2 {
background-color:#F6EB96;
cursor:pointer;
width:200px;
border-bottom:4px solid #D8B83C;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
height:20px;
position:absolute;
left:-50px;
bottom:-22px;
z-index:2;
}
.container2:hover .sizes2 {
bottom:-30px;
}
.container2:hover .con_down2 {
background-color:#F1DD5E;
border-bottom:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.container2:hover .sizes_abs2 {
background-color:#F1DD5E;
}
btn3
.spinningeffect img {
/* Spinning Social Icons Widget By www.mudwnp.blogspot.com */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.spinningeffect img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.center {
text-align: center;
}
btn4
.mudwnpbutton {
color: #222;
background: #9dea4f;
padding: 20px 30px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:0 auto;
font: normal 16px Arial, Verdana;
width: 100px;
}
.mudwnpbutton:hover {
color: #222;
background: #BBFD12;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.mudwnpbutton a {
color: #222;
text-decoration: none;
font: normal 16px Arial, Verdana;
}