.link-button{width: 300px; padding-top: 300px; margin-left: auto; margin-right: auto; position: relative; border-radius: 15px; overflow: hidden; display: block; background: #3D806A;}
.link-button img{width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover;}
.link-button p{width: 50%; height: 50%; padding: 15px; position: absolute; bottom: -12%; left: 50%; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); background: #04422F; border-radius: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; transition: bottom .7s ease-in-out, transform .7s ease-in-out; mix-blend-mode: hard-light;}
.link-button p span{color: #FFF; text-transform: uppercase; font-weight: 700; text-align: center; z-index: 1; word-break: keep-all;}
.link-button:hover p{-webkit-transform: translate(-50%,50%); -moz-transform: translate(-50%,50%); -ms-transform: translate(-50%,50%); transform: translate(-50%,50%); bottom: 50%;}
.link-button p::before{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 100%; background: #000; opacity: .5;}
@media screen and (max-width: 1549px){
.link-button p span{font-size: .8rem;}	 	  
}
@media screen and (max-width: 1199px){
.link-button p {width: 60%; height: 60%;}	 	  
}
@media screen and (max-width: 575px){
.link-button{width: 250px; padding-top: 250px; }	   
}