.button-container-2 {
	 position: relative;
	 width: auto;
	 margin-left: auto;
	 margin-right: auto;
	 margin-top: 7vh;
	 overflow: hidden;
	 transition: 0.5s;
	 background-color: #e5ba45;
}
 .button-container-2 button {
	     padding: 4px 10px 2px;
	 width: 100%;
	 height: 100%;
	 background: #0f7cd8;
	 -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
	 mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
	 -webkit-mask-size: 3000% 100%;
	 mask-size: 3000% 100%;
	 border: none 0px;
	 color: #fff;
	 cursor: pointer;
	 -webkit-animation: ani2 0.7s steps(29) forwards;
	 animation: ani2 0.7s steps(29) forwards;
}
 .button-container-2 button:hover {
	     padding: 4px 10px 2px;
	 -webkit-animation: ani 0.7s steps(29) forwards;
	 animation: ani 0.7s steps(29) forwards;
}
.active button {
	 background-color: #e5ba45;
	}
 .mas {
	 position: absolute;
	 color: #000;
	 text-align: center;
	 width: 100%;
	 position: absolute;
	 margin-top: 3px;
	 overflow: hidden;
}
 @-webkit-keyframes ani {
	 from {
		 -webkit-mask-position: 0 0;
		 mask-position: 0 0;
	}
	 to {
		 -webkit-mask-position: 100% 0;
		 mask-position: 100% 0;
	}
}
 @keyframes ani {
	 from {
		 -webkit-mask-position: 0 0;
		 mask-position: 0 0;
	}
	 to {
		 -webkit-mask-position: 100% 0;
		 mask-position: 100% 0;
	}
}
 @-webkit-keyframes ani2 {
	 from {
		 -webkit-mask-position: 100% 0;
		 mask-position: 100% 0;
	}
	 to {
		 -webkit-mask-position: 0 0;
		 mask-position: 0 0;
	}
}
 @keyframes ani2 {
	 from {
		 -webkit-mask-position: 100% 0;
		 mask-position: 100% 0;
	}
	 to {
		 -webkit-mask-position: 0 0;
		 mask-position: 0 0;
	}
}