hover button animation with transition #2

hover-button-animation-with-transition-2.markdown

hover button animation with transition #2

A Pen by supercode7000 on CodePen.

License.

index.html

<a id="btn" href="#">hover me!</a>

style.css

  *{padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;

   }
 
body{
	   	
   	height: 20vh;
 padding: 200px;

  
}
	#btn{
		border: 2px solid black;
		padding: 30px 60px;
		color: black;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		font-size: 24px;
		font-family: sans-serif;
		transition: all .5s;
		}

	#btn:before{
			width: 100%;
			height: 100%;
			content: '';
			margin: auto;
			position: absolute;
			top:  -100%;
			left: -100%;
			background: #212121;
			transition: all .5s;
			z-index: -1;
			
		}
	/**#btn:after{
			width: 100%;
			height: 100%;
			content: '';
			margin: auto;
			position: absolute;
			top:  100%;
			left: 100%;
			background: #212121;
			transition: all .5s;
			z-index: -1;
			
	}**/
	#btn:hover{
		color: white;
	}
	#btn:hover:before{			
			top: 0;
			left: 0;

	}/**
	#btn:hover:after{
			transform: rotateY(90deg);

	}**/