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

代码语言：html

所属分类：悬停

代码描述：css实现按钮悬浮动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<style type="text/css">

* {

	padding: 0;

	margin: 0;

}

a{

	transition-duration:0.4s, 0.5s;

	transition-property:background-color, color;

	transition-timing-function:ease, ease;

}

body{font-family:Arial;}



/*********************************button 01********************************/

.button01 {

  width: 200px;

  margin: 150px auto 20px auto;

}



.button01 a {

  display: block;

  height: 50px;

  width: 200px;

  

  /*TYPE*/

  color: white;

  font: 17px/50px Helvetica, Verdana, sans-serif;

  text-decoration: none;

  text-align: center;

  text-transform: uppercase;

  

  /*GRADIENT*/  

  background: #00b7ea; /* Old browsers */

  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */

  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}



.button01 a, p {

    -webkit-border-radius: 10px;

     -moz-border-radius: 10px;

          border-radius: 10px;

  

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

}



p {

  background: #222;

  display: block;

  height: 40px;

  width: 180px; 

  margin: -50px 0 0 10px;

  

  /*TYPE*/

  text-align: center;

  font: 12px/45px Helvetica, Verdana, sans-serif;

  color: #fff;

  

  /*POSITION*/

  position: absolute;

  z-index: -1;

  

  /*TRANSITION*/  

  -webkit-transition: margin 0.5s ease;

     -moz-transition: margin 0.5s ease;

       -o-transition: margin 0.5s ease;

      -ms-transition: margin 0.5s ease;

          transition: margin 0.5s ease;

}



/*HOVER*/

.button01:hover .bottom {

  margin: -10px 0 0 10px;

}



.button01:hover .top {

  margin: -80px 0 0 10px;

  line-height: 35px;

}



/*ACTIVE*/

.button01 a:active {

	  background: #00b7ea; /* Old browsers */

	  background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */

	  background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */

	  background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */

	  background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */

	  background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */

	  background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */

	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */



}



.button01:active .bottom {

  margin: -20px 0 0 10px;

}



.button01:active .top {

  margin: -70px 0 0 10px;

}

/*****************************button 01**********************************/

/*****************************button 02*****************************/

div.button02{

	

	color: #333;

	font-size: 12px;

	line-height: 1.64;

	margin:0 auto ;

}

.box {

	background: #1c1c1c;

	color: #0099ff;

	cursor: pointer;

	display: block;

	margin: 40px auto;

	padding: 20px;

	text-align: center;

	width: 150px;

	transition:all 1s ease-out;

	-webkit-transition: -webkit-box-shadow 0.5s ease-out;

	-moz-transition: -moz-box-shadow 0.5s ease-out;

	-o-transition: box-shadow 0.5s ease-out;

}

.box:hover {

	-moz-box-shadow: 0px 0px 15px #0099ff;

	-webkit-box-shadow: 0px 0px 15px #0099ff;

	 box-shadow: 0px 0px 15px #0099ff;

}

a:hover {

	color: #0088CC;

	text-decoration: underline;

}	

/*********************************end  button02***********************/



/*********************************button03***********************************/



#menu {

	height: 100px; width: 630px;

    overflow: hidden;

    margin: 40px auto;

    text-align: center;

}



#menu ul li {

	float: left;

	margin: 0 5px;

	list-style-type: none;

}



/* Menu Link Styles */

#menu ul a {

	display: block;

	background: #e70f23; color: #fff;

	height: 100px; width: 200px;

	font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

	text-decoration: none;

	

	-webkit-transition: margin .4s ease-in-out;

	-moz-transition: margin .4s ease-in-out;

	-o-transition: margin .4s ease-in-out;

	-ms-transition: margin .4s ease-in-out;

	transition: margin .4s ease-in-out;

}



/* Secondary Link Styles */

#menu ul a:nth-of-type(even) {

	background: #000;

	color: white;

}



/* Hover Slide */

#menu ul li:hover :first-child {

	margin-top: -100px;

}	

/***********************************end button03***********************************/



/***********************************button04***********************************/

#navigationMenu li{

	list-style:none;

	height:39px;

	padding:2px;

	width:40px;

}



#navigationMenu span{

	/* Container properties */

	width:0;

	left:38px;

	padding:0;

	position:absolute;

	overflow:hidden;



	/* Text properties */

	font-family:'Myriad Pro',Arial, Helvetica, sans-serif;

	font-size:18px;

	font-weight:bold;

	letter-spacing:0.6px;

	white-space:nowrap;

	line-height:39px;

	

	/* CSS3 Transition: */

	-webkit-transition: 0.25s;

	/*-o-transition: 0.25s;*/

	

	/* Future proofing (these do not work yet): */

	-moz-transition: 0.25s;

	transition: 0.25s;

}



#navigationMenu a{

	background:#C30;



	height:39px;

	width:38px;

	display:block;

	position:relative;

}



/* General hover styles */



#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }

#navigationMenu a:hover{

	text-decoration:none;

	

	/* CSS outer glow with the box-shadow property */

	-moz-box-shadow:0 0 5px #9ddff5;

	-webkit-box-shadow:0 0 5px #9ddff5;

	box-shadow:0 0 5px #9ddff5;

}



/* Green Button */



#navigationMenu .home {}

#navigationMenu .home:hover {	background-position:0.........完整代码请登录后点击上方下载按钮下载查看