If you want to apply 2D transition on your buttons and anchor tag on hover effect, then code below might be helpful for you

HTML:

<div class="container">
	<div class="2d_transition">
		<h2>Types of 2D Transition</h2>
		<a href="#" class="hvr-grow transition">Grow</a>
		<a href="#" class="hvr-shrink transition">shrink</a>
		<a href="#" class="hvr-pulse transition">Pulse</a>
		<a href="#" class="hvr-pulse-grow transition">Pulse Grow</a>
		<a href="#" class="hvr-pulse-shrink transition">Pulse Shrink</a>
		<a href="#" class="hvr-push transition">Push</a>
		<a href="#" class="hvr-pop transition">Pop</a>
		<a href="#" class="hvr-bounce-in transition">Bounce In</a>
		<a href="#" class="hvr-bounce-out transition">Bounce Out</a>
		<a href="#" class="hvr-rotate transition">Rotate</a>
		<a href="#" class="hvr-grow-rotate transition">Grow Rotate</a>
		<a href="#" class="hvr-float transition">Float</a>
		<a href="#" class="hvr-sink transition">Sink</a>
		<a href="#" class="hvr-bob transition">Bob</a>
		<a href="#" class="hvr-hang transition">Hang</a>
		<a href="#" class="hvr-skew transition">Skew</a>
		<a href="#" class="hvr-skew-forward transition">Skew Forward</a>
		<a href="#" class="hvr-skew-backward transition">Skew Backward</a>
		<a href="#" class="hvr-wobble-horizontal transition">Wobble Horizontal</a>
		<a href="#" class="hvr-wobble-vertical transition">Wobble Vertical</a>
		<a href="#" class="hvr-wobble-to-bottom-right transition">Wobble To Bottom Right</a>
		<a href="#" class="hvr-wobble-to-top-right transition">Wobble To Top Right</a>
		<a href="#" class="hvr-wobble-top transition">Wobble Top</a>
		<a href="#" class="hvr-wobble-bottom transition">Wobble Bottom</a>
		<a href="#" class="hvr-wobble-skew transition">Wobble Skew</a>
		<a href="#" class="hvr-buzz transition">Buzz</a>
		<a href="#" class="hvr-buzz-out transition">Buzz Out</a>
	</div>
</div>

CSS:

	.container{
		width: 90%;
		margin: auto;
	}
	.transition {
		background: #151515 none repeat scroll 0 0;
		color: #fff;
		cursor: pointer;
		margin:10px 5px;
		padding: 10px 20px;
		display: inline-block;
		text-decoration: none;
		font-size: 14px;
		text-transform: uppercase;
		border: 1px solid red;
	}
/*==== grow and shrink ====*/
	.hvr-grow,
	.hvr-shrink {
		display: inline-block;
		vertical-align: middle;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-osx-font-smoothing: grayscale;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-property: transform;
		transition-property: transform;
	}
	.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
	    -webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}
	.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
		webkit-transform: scale(0.1);
	   transform: scale(0.9);
	}
/*==== pluse ====*/
	@keyframes hvr-pulse {
	25% {
	    transform: scale(1.1);
	}
	75% {
	    transform: scale(0.9);
	}
	}
	
	.hvr-pulse {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
	    animation-duration: 1s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-pulse;
	    animation-timing-function: linear;
	}
/*==== pluse-grow ====*/
	@keyframes hvr-pulse-grow {
	100% {
	    transform: scale(1.1);
	}
	}
	.hvr-pulse-grow {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
	    animation-direction: alternate;
	    animation-duration: 0.3s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-pulse-grow;
	    animation-timing-function: linear;
	}
/*==== pluse-shrink ====*/
	@keyframes hvr-pulse-shrink {
	100% {
	    transform: scale(0.9);
	}
	}
	
	.hvr-pulse-shrink {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active {
	    animation-direction: alternate;
	    animation-duration: 0.3s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-pulse-shrink;
	    animation-timing-function: linear;
	}
/*==== push ====*/
	@keyframes hvr-push {
	50% {
	    transform: scale(0.8);
	}
	100% {
	    transform: scale(1);
	}
	}
		
	.hvr-push {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-push:hover, .hvr-push:focus, .hvr-push:active {
	    animation-duration: 0.3s;
	    animation-iteration-count: 1;
	    animation-name: hvr-push;
	    animation-timing-function: linear;
	}
/*==== pop ====*/
	@keyframes hvr-pop {
	50% {
	    transform: scale(1.2);
	}
	}

	.hvr-pop {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
	    animation-duration: 0.3s;
	    animation-iteration-count: 1;
	    animation-name: hvr-pop;
	    animation-timing-function: linear;
	}
/*==== bounce in ====*/
	.hvr-bounce-in {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.5s;
	    vertical-align: middle;
	}
	.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
	    transform: scale(1.2);
	    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	}
/*==== bounce out ====*/
	.hvr-bounce-out {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.5s;
	    vertical-align: middle;
	}
	.hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active {
	    transform: scale(0.8);
	    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	}
/*==== rotate ====*/
	.hvr-rotate {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
	    transform: rotate(4deg);
	}
/*==== grow-rotate ====*/
	.hvr-grow-rotate {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
	    transform: scale(1.1) rotate(4deg);
	}
/*==== float ====*/
	.hvr-float {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    transition-timing-function: ease-out;
	    vertical-align: middle;
	}
	.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
	    transform: translateY(-8px);
	}
/*==== sink ====*/
	.hvr-sink {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    transition-timing-function: ease-out;
	    vertical-align: middle;
	}
	.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
	    transform: translateY(8px);
	}
/*==== bob ====*/
	@keyframes hvr-bob {
	0% {
	    transform: translateY(-8px);
	}
	50% {
	    transform: translateY(-4px);
	}
	100% {
	    transform: translateY(-8px);
	}
	}
	@keyframes hvr-bob-float {
	100% {
	    transform: translateY(-8px);
	}
	}
	.hvr-bob {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
	    animation-delay: 0s, 0.3s;
	    animation-direction: normal, alternate;
	    animation-duration: 0.3s, 1.5s;
	    animation-fill-mode: forwards;
	    animation-iteration-count: 1, infinite;
	    animation-name: hvr-bob-float, hvr-bob;
	    animation-timing-function: ease-out, ease-in-out;
	}
/*==== hang ====*/
	@keyframes hvr-hang {
	0% {
	    transform: translateY(8px);
	}
	50% {
	    transform: translateY(4px);
	}
	100% {
	    transform: translateY(8px);
	}
	}
	@keyframes hvr-hang-sink {
	100% {
	    transform: translateY(8px);
	}
	}
	.hvr-hang {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active {
	    animation-delay: 0s, 0.3s;
	    animation-direction: normal, alternate;
	    animation-duration: 0.3s, 1.5s;
	    animation-fill-mode: forwards;
	    animation-iteration-count: 1, infinite;
	    animation-name: hvr-hang-sink, hvr-hang;
	    animation-timing-function: ease-out, ease-in-out;
	}
/*==== skew ====*/
	.hvr-skew {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active {
	    transform: skew(-10deg);
	}
/*==== skew forward ====*/
	.hvr-skew-forward {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transform-origin: 0 100% 0;
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active {
	    transform: skew(-10deg);
	}
/*==== skew-backward ====*/
	.hvr-skew-backward {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transform-origin: 0 100% 0;
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active {
	    transform: skew(10deg);
	}
/*==== wobble-vertical ====*/
	@keyframes hvr-wobble-vertical {
	16.65% {
	    transform: translateY(8px);
	}
	33.3% {
	    transform: translateY(-6px);
	}
	49.95% {
	    transform: translateY(4px);
	}
	66.6% {
	    transform: translateY(-2px);
	}
	83.25% {
	    transform: translateY(1px);
	}
	100% {
	    transform: translateY(0px);
	}
	}
	.hvr-wobble-vertical {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-vertical;
	    animation-timing-function: ease-in-out;
	}
/*==== wobble-horizontal ====*/
	@keyframes hvr-wobble-horizontal {
	16.65% {
	    transform: translateX(8px);
	}
	33.3% {
	    transform: translateX(-6px);
	}
	49.95% {
	    transform: translateX(4px);
	}
	66.6% {
	    transform: translateX(-2px);
	}
	83.25% {
	    transform: translateX(1px);
	}
	100% {
	    transform: translateX(0px);
	}
	}
	.hvr-wobble-horizontal {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-horizontal;
	    animation-timing-function: ease-in-out;
	}
/*==== wobble-to-bottom-right ====*/
	@keyframes hvr-wobble-to-bottom-right {
	16.65% {
	    transform: translate(8px, 8px);
	}
	33.3% {
	    transform: translate(-6px, -6px);
	}
	49.95% {
	    transform: translate(4px, 4px);
	}
	66.6% {
	    transform: translate(-2px, -2px);
	}
	83.25% {
	    transform: translate(1px, 1px);
	}
	100% {
	    transform: translate(0px, 0px);
	}
	}
	.hvr-wobble-to-bottom-right {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-to-bottom-right;
	    animation-timing-function: ease-in-out;
	}
/*==== wobble-to-top-right =====*/
	@keyframes hvr-wobble-to-top-right {
	16.65% {
	    transform: translate(8px, -8px);
	}
	33.3% {
	    transform: translate(-6px, 6px);
	}
	49.95% {
	    transform: translate(4px, -4px);
	}
	66.6% {
	    transform: translate(-2px, 2px);
	}
	83.25% {
	    transform: translate(1px, -1px);
	}
	100% {
	    transform: translate(0px, 0px);
	}
	}
	.hvr-wobble-to-top-right {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-to-top-right;
	    animation-timing-function: ease-in-out;
	}

/*==== wobble-top ====*/ 
	.hvr-wobble-top {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transform-origin: 0 100% 0;
	    vertical-align: middle;
	}
	.hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: wobble-top;
	    animation-timing-function: ease-in-out;
	}

	@-webkit-keyframes wobble-top {
	  16.65% {
	    -webkit-transform: skew(-12deg);
	    transform: skew(-12deg);
	  }

	  33.3% {
	    -webkit-transform: skew(10deg);
	    transform: skew(10deg);
	  }

	  49.95% {
	    -webkit-transform: skew(-6deg);
	    transform: skew(-6deg);
	  }

	  66.6% {
	    -webkit-transform: skew(4deg);
	    transform: skew(4deg);
	  }

	  83.25% {
	    -webkit-transform: skew(-2deg);
	    transform: skew(-2deg);
	  }

	  100% {
	    -webkit-transform: skew(0);
	    transform: skew(0);
	  }
	}

	@keyframes wobble-top{
	  16.65% {
	    -webkit-transform: skew(-12deg);
	    transform: skew(-12deg);
	  }

	  33.3% {
	    -webkit-transform: skew(10deg);
	    transform: skew(10deg);
	  }

	  49.95% {
	    -webkit-transform: skew(-6deg);
	    transform: skew(-6deg);
	  }

	  66.6% {
	    -webkit-transform: skew(4deg);
	    transform: skew(4deg);
	  }

	  83.25% {
	    -webkit-transform: skew(-2deg);
	    transform: skew(-2deg);
	  }

	  100% {
	    -webkit-transform: skew(0);
	    transform: skew(0);
	  }
	}
/*===== wobble-bottom =====*/
	.hvr-wobble-bottom {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transform-origin: 100% 0 0;
	    vertical-align: middle;
	}
	.hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active {
		animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: wobble-bottom;
	    animation-timing-function: ease-in-out;
	}
	@-webkit-keyframes wobble-bottom {
	  16.65% {
	    -webkit-transform: skew(-12deg);
	    transform: skew(-12deg);
	  }

	  33.3% {
	    -webkit-transform: skew(10deg);
	    transform: skew(10deg);
	  }

	  49.95% {
	    -webkit-transform: skew(-6deg);
	    transform: skew(-6deg);
	  }

	  66.6% {
	    -webkit-transform: skew(4deg);
	    transform: skew(4deg);
	  }

	  83.25% {
	    -webkit-transform: skew(-2deg);
	    transform: skew(-2deg);
	  }

	  100% {
	    -webkit-transform: skew(0);
	    transform: skew(0);
	  }
	}

	@keyframes wobble-bottom {
	  16.65% {
	    -webkit-transform: skew(-12deg);
	    transform: skew(-12deg);
	  }

	  33.3% {
	    -webkit-transform: skew(10deg);
	    transform: skew(10deg);
	  }

	  49.95% {
	    -webkit-transform: skew(-6deg);
	    transform: skew(-6deg);
	  }

	  66.6% {
	    -webkit-transform: skew(4deg);
	    transform: skew(4deg);
	  }

	  83.25% {
	    -webkit-transform: skew(-2deg);
	    transform: skew(-2deg);
	  }

	  100% {
	    -webkit-transform: skew(0);
	    transform: skew(0);
	  }
	}
/*==== wobble-skew =====*/
	@keyframes hvr-wobble-skew {
	16.65% {
	    transform: skew(-12deg);
	}
	33.3% {
	    transform: skew(10deg);
	}
	49.95% {
	    transform: skew(-6deg);
	}
	66.6% {
	    transform: skew(4deg);
	}
	83.25% {
	    transform: skew(-2deg);
	}
	100% {
	    transform: skew(0deg);
	}
	}
	.hvr-wobble-skew {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-skew;
	    animation-timing-function: ease-in-out;
	}
/*=== buzz ====*/
	@keyframes hvr-buzz {
	50% {
	    transform: translateX(3px) rotate(2deg);
	}
	100% {
	    transform: translateX(-3px) rotate(-2deg);
	}
	}
	.hvr-buzz {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
	    animation-duration: 0.15s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-buzz;
	    animation-timing-function: linear;
	}
/*=== buzz-out ===*/
	@keyframes hvr-buzz-out {
	10% {
	    transform: translateX(3px) rotate(2deg);
	}
	20% {
	    transform: translateX(-3px) rotate(-2deg);
	}
	30% {
	    transform: translateX(3px) rotate(2deg);
	}
	40% {
	    transform: translateX(-3px) rotate(-2deg);
	}
	50% {
	    transform: translateX(2px) rotate(1deg);
	}
	60% {
	    transform: translateX(-2px) rotate(-1deg);
	}
	70% {
	    transform: translateX(2px) rotate(1deg);
	}
	80% {
	    transform: translateX(-2px) rotate(-1deg);
	}
	90% {
	    transform: translateX(1px) rotate(0deg);
	}
	100% {
	    transform: translateX(-1px) rotate(0deg);
	}
	}
	.hvr-buzz-out {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
	    animation-duration: 0.75s;
	    animation-iteration-count: 1;
	    animation-name: hvr-buzz-out;
	    animation-timing-function: linear;
	}

see the live demo at  http://manishjoshi123.github.io/

I have attached the full code packet at the bottom