pushタイプbutton
zoom_in_animタイプbutton zoom_in_animタイプbutton HTML

<a href="#" class="push_btn push_btn_shadow"><span>pushタイプbutton</span></a>
<br />
<a href="#" class="zoom_in_anim"><span>zoom_in_animタイプbutton</span></a>
<a href="#" class="zoom_in_anim2"><span>zoom_in_animタイプbutton</span></a>
<div class="animu_wrap"><div class="animu_wrap2"><a href="#" class="zoom_in_anim3 and01"><span>zoom_in_animタイプbutton</span></a></div></div>

CSS

.push_btn{
	position: relative;
	display: inline-block;
	text-decoration: none;
	color:#000;
	text-align: center;
}
.push_btn span{
	position:relative;
	background-color:#FFF;
	color:#000;
	height:3em;
	padding:0 1em;
	border-radius: 0.5em;
	display: inline-grid;
	justify-items: center;
	align-items: center;
	transition: all 0.3s ease;
	border:#000 solid 1px;
	z-index:1;
}
.push_btn:after {
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	width: 100%;
	height: 100%;
	border-radius: 0.5em;
	background-color: #e9e9e9;
}
.push_btn span:hover{
	transform:translate(6px,6px);
	z-index:2;
	background-color:#000;
	color:#FFF;
	border:#FFF solid 1px;

}
body{
vertical-align:middle; 
padding: 100px 0;
text-align: center;
}p{
margin: 0 0 10px 0;
}
/***************/
.zoom_in_anim {
	background: #4e4e4e;
	color: #fff;
	text-align: center;
	width: 200px;
	padding: 1em 2em;
	margin: 1em;
	display:  inline-block;
	text-decoration: none;
	text-shadow: 0px 1px 0px #333;
	letter-spacing: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	cursor: pointer;
	animation: bounce 1.6s ease-in-out forwards;
	animation-iteration-count: infinite;
}
.zoom_in_anim2 {
	background: #4e4e4e;
	color: #fff;
	text-align: center;
	width: 200px;
	padding: 1em 2em;
	margin: 1em;
	display:  inline-block;
	text-decoration: none;
	text-shadow: 0px 1px 0px #333;
	letter-spacing: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	cursor: pointer;
	animation: bounce02 1.6s ease-in-out forwards;
	animation-iteration-count: infinite;
}
.zoom_in_anim3 {
	background: #4e4e4e;
	color: #fff;
	text-align: center;
	width: 200px;
	padding: 1em 2em;
	margin: 1em;
	display:  inline-block;
	text-decoration: none;
	text-shadow: 0px 1px 0px #333;
	letter-spacing: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	cursor: pointer;
	animation: bounce03 linear 3s ;
	animation-iteration-count: infinite;
	position: relative;
}
.animu_wrap{
	width: 100%;
	height: 100%;
	display: inline-block;
	animation: bounce04 linear 6s ;
	animation-iteration-count: infinite;
}
.animu_wrap2{
	width: 100%;
	height: 100%;
	display: inline-block;
	animation: bounce05 linear 8s ;
	animation-iteration-count: infinite;
}
@keyframes bounce {
0% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
50% {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	}
}
@keyframes bounce02 {
10% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
40% {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	}
50% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
60% {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	}
75% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
90% {
	transform: scale(1.05);
	-webkit-transform: scale(1.);
}
100% {
	transform: scale(1);
	-webkit-transform: scale(1);
}
}
@keyframes bounce03 {
0% {
	transform: scale(1.02);
  }
  25%{
	transform: scale(1.05);
  }
	50%{
	transform: scale(1.02);
	}
	 75%{	
	transform: scale(1.05);
  }
  100% {
	transform: scale(1.02);
  }
}
  @keyframes bounce05 {
  0% , 10% , 20%, 30% , 40% , 50% , 60% , 70% , 80% , 90% , 100% {
	-ms-filter: blur(0);
  filter: blur(0);
}
5% , 15% , 25% , 35% , 45% , 55% , 65% , 75% , 85% , 95%{
	-ms-filter: blur(1px);
  filter: blur(1px);
}
}
@keyframes bounce04 {
0% {
	transform: rotate(0deg);
  }
  25%{
	transform: rotate(1deg);
  }
	50%{
	transform: rotate(0deg);
	}
      75%{
	transform: rotate(-2deg);
  }
  100% {
	transform: rotate(0eg);
  }
}